What are the differences between extend and component in Vue?

This article mainly introduces the differences between extend, component, mixins and extends in Vue. It is very good and has reference value. Friends in need can refer to it

##new Vue( ), component

First we agree on an option object baseOptions, which will be used in the following code.

let options = {
 template: &#39;<p>{{firstName}} {{lastName}} aka {{alias}}</p>&#39;,
 data: function () {
  return {
   firstName: &#39;Walter&#39;,
   lastName: &#39;White&#39;,
   alias: &#39;Heisenberg&#39;
  }
 },
 created(){
  console.log(&#39;onCreated-1&#39;);
 }
};

new Vue() source: vue/src/core/instance/index.js

Instantiate a component.

new Vue(baseOptions);
// -> onCreated-1
component source:vue/src/core/global-api/assets.js

Vue.component is a method used to register or obtain global components. The function is to register (name) the extended instance constructor generated by Vue.extend as a component. Globally registered components can be used in all Vue instances constructed later than the component registration statement.

Vue.component('global-component', Vue.extend(baseOptions));
//传入一个选项对象（自动调用 Vue.extend）,等价于上行代码.
Vue.component('global-component', baseOptions);
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('my-component')

When we When you need to 'extend' or 'mix' baseOptions on other pages, Vue provides a variety of implementation methods: extend, mixins, extends.

extend source:vue/src/ core/global-api/extend.js

You can extend the Vue constructor to create reusable component constructors with predefined options.

let BaseComponent = Vue.extend(baseOptions);
//基于基础组件BaseComponent,再扩展新逻辑.
new BaseComponent({
 created(){
  //do something
  console.log('onCreated-2');
 }
 //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

mixins

The mixins option accepts an array of mix objects. These mixin instance objects can contain options just like normal instance objects, and they will be merged logically using the same options in Vue.extend() .

new Vue({
 mixins: [baseOptions],
 created(){
  //do something
  console.log('onCreated-2');
 }
 //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

extends

This is similar to mixins. The difference is that the component's own options will have higher priority than the source component to be extended. Level.

The official document says this. In addition to priority, there may be only types that accept parameters. Mixins accept arrays.

new Vue({
 extends: baseOptions,
 created(){
  //do something
  console.log('onCreated-2');
 }
 //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

From the results, there are three ways Both can achieve the requirements, but the forms are different.

• Vue.extend

##Vue.extend just creates a constructor, which is Create reusable components.
mixins,extends
And mixins and extends are for extending components.
From the source code, the options received through extend, extends and mixins are ultimately merged through mergeOptions. The difference is just the priority mentioned in the official document extend > extends > mixins. Therefore, if it is a simple extension of component functions, all three methods can achieve the goal.

As for the detailed distinction between the usage scenarios of these three methods, I am currently confused. In the circle...

//Different examples of several methods:

https://jsfiddle.net/willnewi...

Option object merge strategy Vue.config.optionMergeStrategiesThe option objects mentioned above are merged according to certain strategies in mergeOptions.

Print Vue.config. optionMergeStrategies, you will see the default optionMergeStrategies as follows:

##mergeHook

• of child components and parent components Lifecycle events are combined into an array. The parent component is in front and the child component is in the back.

• watch

• The watchers of child components and parent components will be merged into an array. The parent component is in front and the child component is in the back.

• mergeAssets(filters, components, directives)

• It will first search in the sub-component, if not, it will go up the prototype chain , find the corresponding property in the parent component.

• data merge rules

• No duplicate attributes retained

• Same name override

• The objects in data also have the same rules. No duplicate attributes are retained, and the same name is overwritten.

• props, methods, computed: No duplicates are retained, and subcomponents with the same name are overwritten. Parent component

mergeAssets

In the mergeAssets merge method, the prototype delegate is used. He will first merge the parent component’s The attributes are placed on the prototype chain of the new object created. Then extend the rules for finding attributes in the new object

: For example, when searching for an attribute, such as obj[a], if obj does not have a this Attribute, then it will be found in the prototype of the obj object. If it is not found yet, it will be searched on the prototype of the prototype until the end of the prototype chain. If it is not found yet, undefined will be returned.

function extend (to, _from) {
 for (var key in _from) {
 to[key] = _from[key];
 }
 return to
}
function mergeAssets (parentVal, childVal) {
 var res = Object.create(parentVal || null);
 return childVal
 ? extend(res, childVal)
 : res
}

Summary

##Vue.component registers global components for convenience

• Vue.extend creates the constructor of the component, in order to reuse

• mixins, extends in order to extend

• The above is what I compiled for everyone Yes, I hope it will be helpful to everyone in the future.

Related articles:

How to use axios to implement the function of uploading pictures with a progress bar

How to implement JSON data grouping optimization in Javascript

About this pointing problem in vue (detailed tutorial)

The above is the detailed content of What are the differences between extend and component in Vue?. For more information, please follow other related articles on the PHP Chinese website!