在Vue中extend 、component有哪些差別？

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

new Vue( )、component

首先我們來約定一個選項物件baseOptions,後面的程式碼會用到.

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 是用來註冊或取得全域元件的方法，其作用是將透過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-2

mixins

mixins 選項接受一個混合物件的陣列。這些混合實例物件可以像正常的實例物件一樣包含選項,他們將在 Vue.extend() 裡最終選擇使用相同的選項合併邏輯合併。

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

extends

這和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 為了擴充

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用axios如何實作上傳圖片帶有進度條功能

在Javascript中如何實作JSON資料分組優化

在vue中關於this指向問題（詳細教程）

#

以上是在Vue中extend 、component有哪些差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！