Vue 中 extend / component / mixins / extends 的區別

時間 2019-11-06

標籤 vue extend component mixins extends 區別简体版

原文原文鏈接

在segmentfault上看到了一個問題vue.extend, vue.component 區別,忽然有些方,好歹也寫了幾個小vue項目,本身都弄不清楚這些東西...javascript

new Vue()、component

首先咱們來約定一個選項對象 baseOptions,後面的代碼會用到.css

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

實例化一個組件.html

new Vue(baseOptions);
// -> onCreated-1

component source:vue/src/core/global-api/assets.js

Vue.component 是用來註冊或獲取全局組件的方法，其做用是將經過 Vue.extend 生成的擴展實例構造器註冊（命名）爲一個組件.全局註冊的組件能夠在全部晚於該組件註冊語句構造的Vue實例中使用.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.java

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

能夠擴展 Vue 構造器，從而用預約義選項建立可複用的組件構造器。segmentfault

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

mixins

mixins 選項接受一個混合對象的數組。這些混合實例對象能夠像正常的實例對象同樣包含選項,他們將在 Vue.extend() 裏最終選擇使用相同的選項合併邏輯合併。api

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

extends

這和 mixins 相似，區別在於，組件自身的選項會比要擴展的源組件具備更高的優先級.數組

官方文檔是這麼寫的,除了優先級,可能就剩下接受參數的類型吧,mixins接受的是數組.ide

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
}