The introduction

In Vue single-page applications we have become accustomed to using the template syntax, js code, as well as the style of the trilogy, such universal of writing has been able to meet the demand of most of the development, the Vue in the website also provides many grammar, flexible and efficient use the API to provide developers, we take a look at these good fun.

The body of the

1. Mixin

Mixins provide a very flexible way to distribute reusable functionality in Vue components. A mixin object can contain any component options i.e. lifecycle, base data, instance methods, and when a component uses a mixin object, all mixin object options are “blended” into the component’s own options. When we need to use data in each single page, methods can be defined in an external object and imported into the corresponding instance. You can think of it as an instance reinforcement.

// Single page component <template> <div class=' '>
       {{mixinData}} // 'I'm mixed data.'</div> </template> <script> import mixin from'./mixin'
export default {
  mixins:[mixin],
  data () {
    return {
      innerData:'I'm the data of the single page itself'
    };
  },
  methods: {
    mixins(){
      alert('I'm a single page method')}},created() {
    alert('I'm a single page created lifecycle') this.mixins() //},} // Mixins of objectsexport default {
    created(){
        alert('I'm the created lifecycle inside a mixin')},data() {return {
            mixinData:'I'm mixed data.'
        }
    }, 
    methods: {
        mixins(){
          alert('I'm a method inside a mixin')}}}Copy the code

I’m a mixin inside the creation lifecycle -> I’m a single-page creation lifecycle -> I’m a single-page method summary:

  • Created, Mounted, and so on are merged into an array, so they are all called. In addition, hooks mixed in with objects are called before the component’s own hooks.
  • Options that are values for objects, such as Methods, Components, and directives, will be combined into the same object. When two object key names conflict, the component object’s key-value pair is takenComponent first
  • The data object Data takes precedence over the component data in the event of a conflict

2. Rendering functions

VUE still uses HTML, JS and CSS separate template syntax in the template file to build a single page application, but the author feels that the control of HTML tags is slightly insufficient, according to the different data show different tags may not support enough, or need to completely traverse all possible situations. This is definitely redundant and inefficient.

Here we introduce the official example to better explain.

<template>
   <div class=' '<slot></slot> <h1 v-if= </slot> <h1 v-if= </slot> <h1 v-if= </slot> <h1 v-if="type === 1">
        <slot></slot>
      </h1>
      <h2 v-else-if="type === 2">
        <slot></slot>
      </h2>
      <h3 v-else-if="type === 3">
        <slot></slot>
      </h3>
   </div>
</template>
<script>
export default {
   props: {
    type: {
      typeDefault: 1},},} </script> <style lang='less' scoped>
</style>
Copy the code

If more row tags are needed, the template will grow, and the repeated execution of judgment statements will increase. Such laborious and thankless things should be avoided. So we’ll introduce render() to render. Use the render function instead of the template tag to render the tag.

Child component import Vue from'vue'
Vue.component('Heading',{
    render:function(createElement){
         return createElement(`h${this.type}`,this.$slots.default) // This completes the selection of the h tag in the template rendering,}, props: {type: {
            type: Number, default: 1 }, }, }) <! -- Parent component --> <Heading:type="2"</Heading> // render result <h2>123</h2>Copy the code

CreateElement is an acceptable argument to the rendering function, and is used to build a tree structure that can be rendered. The first parameter is the tag, the second parameter is the tag’s attribute value, and the third parameter is the createElement array that can be nested, which is an array of child tags. The createElement option inside the array can also be nested. Detailed solutions and examples can be found in the official documentation to provide an idea.

import Vue from 'vue'
Vue.component('Heading',{
    render:function(createElement){
         return createElement(`div`,[createElement('h1'.'Contents of H1'),createElement('h2'.'H2 content')]}}) out of the dom is equivalent to the rendering function: < div > < h1 > h1 content < / h1 > < h2 > h2 content < / h2 > < / div >Copy the code

Functional components

A functional component differs from other components in that it has no lifecycle, responsive data, and computational properties. In other words, a functional component can be understood as a component that has no VUE instance. It only accepts a parameter from props, which gives it the ability to render quickly.

Personal usage scenario: I would use encapsulation of components at multiple levels. For example, if I have a presentation requirement on my side, I want to present the same data source through cards, lists, and other optional presentations. If we put all of this code in one component it’s not very decoupled, if we put all of this presentation in components, all of it in the parent component it’s redundant again. We can then provide a component to distribute eligible components. You can use individual presentation components separately or within the same package.

// Parent <template> <div class='father'>
        <card-component v-if="type===card"></card-component> // Different components need to be imported into the parent component <list-component v-if="type===list"></list-component>
        <circle-component v-if="type===circle"></circle-component>
   </div>
</template>
<script>
export default {
  data () {
    return {
      type:'card'}; },} </script> // override the parent component <template> <div class='father'>
        <function-component :type="type"></function-component> // function component distribution </div> </template> // function component <template functional> If you don't use a template, you should set functional:true
   <div class='father'>
        <card-component v-if="prop.type===card"></card-component> // Different components we introduce function component <list-component v-if="prop.type===list"></list-component>
        <circle-component v-if="prop.type===circle"></circle-component>
   </div>
</template>
Copy the code

The end of the

It will be updated if there are new ones.