這篇文章主要介紹了Vue 中extend 、component 、mixins 、extends 的區別,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
new Vue( )、component
首先我們來約定一個選項物件baseOptions,後面的程式碼會用到.
let options = {
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
},
created(){
console.log('onCreated-1');
}
};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 是用來註冊或取得全域元件的方法，其作用是將透過Vue.extend 產生的擴展實例建構器註冊（命名）為一個元件.全域註冊的元件可以在所有晚於該元件註冊語句構造的Vue實例中使用.
Vue.component('global-component', Vue.extend(baseOptions)); //传入一个选项对象（自动调用 Vue.extend）,等价于上行代码. Vue.component('global-component', baseOptions); // 获取注册的组件（始终返回构造器） var MyComponent = Vue.component('my-component')
當我們需要在其他頁面'擴充'或叫'混合'baseOptions時,Vue中提供了多種的實作方式:extend,mixins,extends.
extend source:vue/src/ core/global-api/extend.js
可以擴充Vue 建構器，從而用預先定義選項建立可重複使用的元件建構器。
let BaseComponent = Vue.extend(baseOptions);
//基于基础组件BaseComponent,再扩展新逻辑.
new BaseComponent({
created(){
//do something
console.log('onCreated-2');
}
//其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2mixins
mixins 選項接受一個混合物件的陣列。這些混合實例物件可以像正常的實例物件一樣包含選項,他們將在 Vue.extend() 裡最終選擇使用相同的選項合併邏輯合併。
new Vue({
mixins: [baseOptions],
created(){
//do something
console.log('onCreated-2');
}
//其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2extends
這和mixins 類似，差別在於，元件本身的選項會比要擴充的來源元件具有更高的優先級.
官方文檔是這麼寫的,除了優先級,可能就剩下接受參數的類型吧,mixins接受的是數組.
new Vue({
extends: baseOptions,
created(){
//do something
console.log('onCreated-2');
}
//其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2從結果上看,三種方式都能實現需求,但是形式卻有不同.
Vue.extend
#Vue.extend只是創建一個建構器,他是為了建立可重複使用的元件.
mixins,extends
#而mixins和extends是為了拓展元件.
##從原始碼來看透過extend,extends和mixins三種方式接收的options,最終都是透過mergeOptions進行合併的.差異只是官方文件中提到的優先順序不同extend > extends > mixins.所以,如果是簡單的擴展組件功能,三個方式都可以達到目的.
#而這三種方式使用場景上細化的區分,目前我也蒙圈中...
//幾種方式的不同範例：
https://jsfiddle.net/willnewi...
選項物件合併策略Vue.config.optionMergeStrategies
上面提到的選項物件,是在mergeOptions中依照一定策略合併的.
列印Vue.config. optionMergeStrategies,你會看預設的optionMergeStrategies如下:
mergeHook
#子元件和父元件的生命週期事件會合併在一個陣列裡。父組件在前，子組件在後。
watch
子元件和父元件的watchers會合併在一個陣列裡。父組件在前，子組件在後。
mergeAssets(filters，components，directives)
首先會在子元件裡查找，如果沒有，才會沿著原型鏈向上，找父組件中對應的屬性。
data 合併規則
無重複的屬性保留
同名覆寫
data中的物件也是相同規則,無重複的屬性保留,同名覆蓋
#props、methods、computed: 無重複保留,同名子元件覆蓋父元件
mergeAssets
#mergeAssets合併方法裡,用到了原型委託.他會先把父元件的屬性放在創建的新物件的原型鏈上.然後擴展新物件
物件裡查找屬性的規則:舉個例子，當尋找一個屬性時，如obj[a] ,如果obj 沒有a 這個屬性，那麼將會在obj 物件的原型裡找，如果還沒有，在原型的原型上找，直到原型鏈的盡頭，如果還沒找到，返回undefined。
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 註冊全域元件,為了方便
Vue.extend 建立元件的建構子,為了復用
mixins、extends 為了擴充
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
#以上是在Vue中extend 、component有哪些差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
