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

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

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

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

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

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

mixins

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

extends

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

• 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:

• 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

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

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
}

##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 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!