快捷導(dǎo)航

詳解Vue 中 extend 、component 、mixins 、extends 的區(qū)別

更新時(shí)間：2017年12月20日 09:37:58 作者：詩人的咸魚

這篇文章主要介紹了Vue 中 extend 、component 、mixins 、extends 的區(qū)別,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

new Vue()、component

首先我們來約定一個(gè)選項(xiàng)對(duì)象 baseOptions,后面的代碼會(huì)用到.

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

實(shí)例化一個(gè)組件.

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

Vue.component 是用來注冊(cè)或獲取全局組件的方法，其作用是將通過 Vue.extend 生成的擴(kuò)展實(shí)例構(gòu)造器注冊(cè)（命名）為一個(gè)組件.全局注冊(cè)的組件可以在所有晚于該組件注冊(cè)語句構(gòu)造的Vue實(shí)例中使用.

Vue.component('global-component', Vue.extend(baseOptions));
//傳入一個(gè)選項(xiàng)對(duì)象（自動(dòng)調(diào)用 Vue.extend）,等價(jià)于上行代碼.
Vue.component('global-component', baseOptions);
// 獲取注冊(cè)的組件（始終返回構(gòu)造器）
var MyComponent = Vue.component('my-component')

當(dāng)我們需要在其他頁面‘?dāng)U展'或者叫‘混合'baseOptions時(shí),Vue中提供了多種的實(shí)現(xiàn)方式:extend,mixins,extends.

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

可以擴(kuò)展 Vue 構(gòu)造器，從而用預(yù)定義選項(xiàng)創(chuàng)建可復(fù)用的組件構(gòu)造器。

let BaseComponent = Vue.extend(baseOptions);
//基于基礎(chǔ)組件BaseComponent,再擴(kuò)展新邏輯.
new BaseComponent({
 created(){
  //do something
  console.log('onCreated-2');
 }
 //其他自定義邏輯
});
// -> onCreated-1
// -> onCreated-2

mixins

mixins 選項(xiàng)接受一個(gè)混合對(duì)象的數(shù)組。這些混合實(shí)例對(duì)象可以像正常的實(shí)例對(duì)象一樣包含選項(xiàng),他們將在 Vue.extend() 里最終選擇使用相同的選項(xiàng)合并邏輯合并。

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

extends

這和 mixins 類似，區(qū)別在于，組件自身的選項(xiàng)會(huì)比要擴(kuò)展的源組件具有更高的優(yōu)先級(jí).

官方文檔是這么寫的,除了優(yōu)先級(jí),可能就剩下接受參數(shù)的類型吧,mixins接受的是數(shù)組.

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

從結(jié)果上看,三種方式都能實(shí)現(xiàn)需求,但是形式卻有不同.

Vue.extend
Vue.extend只是創(chuàng)建一個(gè)構(gòu)造器,他是為了創(chuàng)建可復(fù)用的組件.
mixins,extends
而mixins和extends是為了拓展組件.

從源碼來看通過extend,extends和mixins三種方式接收的options,最終都是通過mergeOptions進(jìn)行合并的.差異只是官方文檔中提到的優(yōu)先級(jí)不同extend > extends > mixins. 所以,如果是簡單的擴(kuò)展組件功能,三個(gè)方式都可以達(dá)到目的.

而這三種方式使用場(chǎng)景上細(xì)化的區(qū)分,目前我也蒙圈中...

//幾種方式的不同示例:

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

選項(xiàng)對(duì)象合并策略 Vue.config.optionMergeStrategies

上面提到的選項(xiàng)對(duì)象,是在mergeOptions中按照一定策略進(jìn)行合并的.

打印Vue.config.optionMergeStrategies,你會(huì)看默認(rèn)的optionMergeStrategies如下:

mergeHook
子組件和父組件的生命周期事件會(huì)合并在一個(gè)數(shù)組里。父組件在前，子組件在后。
watch
子組件和父組件的watchers會(huì)合并在一個(gè)數(shù)組里。父組件在前，子組件在后。
mergeAssets(filters，components，directives)
首先會(huì)在子組件里查找，如果沒有，才會(huì)沿著原型鏈向上，找父組件中對(duì)應(yīng)的屬性。
data 合并規(guī)則
無重復(fù)的屬性保留
同名覆蓋
data中的對(duì)象也是相同規(guī)則,無重復(fù)的屬性保留,同名覆蓋
props、methods、computed: 無重復(fù)保留,同名子組件覆蓋父組件

mergeAssets

mergeAssets合并方法里,用到了原型委托.他會(huì)先把父組件的屬性放在創(chuàng)建的新對(duì)象的原型鏈上.然后擴(kuò)展新對(duì)象

對(duì)象里查找屬性的規(guī)則 :舉個(gè)例子，當(dāng)查找一個(gè)屬性時(shí)，如 obj[a] ,如果 obj 沒有 a 這個(gè)屬性，那么將會(huì)在 obj 對(duì)象的原型里找，如果還沒有，在原型的原型上找，直到原型鏈的盡頭，如果還沒有找到，返回 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
}

總結(jié)