In daily development, there must be lazy desire, most of the front-end development tools, are programmers in order to be lazy, the liberation of labor force

How to be lazy at work, the first is public extraction, component encapsulation. Separating out the reusable stuff allows us to write a lot less code. Here we focus on vue’s # extend, mixins, extends.

1.extend

Creating a subclass that inherits from a Vue class only affects the instance objects of the subclass, not the Vue class itself and the instance objects of the Vue class. Much the same as vue.component(), but component registers component names, though extend() is recommended for dynamically inserting components.

<div id="mount-point"></div> // create constructor var Profile = vue.extend ({template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg'}}}) // Create a Profile instance and mount it to an element. new Profile().$mount('#mount-point')Copy the code

2.minxins.

A mixin is a mixin of Vue class options. All Vue instance objects will have the configuration behavior blended in. Extends is multiple inheritance compared to extends.

var mixin = { 
    created: function () { console.log(1) } 
} 
var vm = new Vue({ 
    created: function () { console.log(2) }, 
    mixins: [mixin] 
})
Copy the code

Mixins points

  • Data mixed with component data takes precedence
  • The hook functions are blended into an array, and the hooks mixed into the object are called before the component’s own hooks
  • Options that are values for objects, such as Methods, Components, and directives, will be mixed into the same object. When two object key names conflict, the component object’s key-value pair is taken.
  • The above merger strategy can be passedVue.config.optionMergeStrategiesModify the

3.extends

Declare extending another component (which could be a simple option object or constructor) without using vue.extend. This is mainly for the convenience of extending single-file components. Extends triggers a higher priority.

var otherComp= { ... } var extends: otherComp = {extends: otherComp}Copy the code

4. The last

  • Priority Vue. The extend > extends > mixins