extend與component在Vue中有什么區(qū)別-創(chuàng)新互聯(lián)
今天就跟大家聊聊有關(guān)extend與component在Vue 中有什么區(qū)別，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
目前創(chuàng)新互聯(lián)建站已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、奈曼網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。new Vue()、component
首先我們來約定一個選項對象 baseOptions,后面的代碼會用到.
let options = {
template: '{{firstName}} {{lastName}} aka {{alias}}
',
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 生成的擴展實例構(gòu)造器注冊（命名）為一個組件.全局注冊的組件可以在所有晚于該組件注冊語句構(gòu)造的Vue實例中使用.
Vue.component('global-component', Vue.extend(baseOptions));
//傳入一個選項對象（自動調(diào)用 Vue.extend）,等價于上行代碼.
Vue.component('global-component', baseOptions);
// 獲取注冊的組件（始終返回構(gòu)造器）
var MyComponent = Vue.component('my-component')當(dāng)我們需要在其他頁面‘?dāng)U展'或者叫‘混合'baseOptions時,Vue中提供了多種的實現(xiàn)方式:extend,mixins,extends.
extend source:vue/src/core/global-api/extend.js
可以擴展 Vue 構(gòu)造器，從而用預(yù)定義選項創(chuàng)建可復(fù)用的組件構(gòu)造器。
let BaseComponent = Vue.extend(baseOptions);
//基于基礎(chǔ)組件BaseComponent,再擴展新邏輯.
new BaseComponent({
created(){
//do something
console.log('onCreated-2');
}
//其他自定義邏輯
});
// -> onCreated-1
// -> onCreated-2mixins
mixins 選項接受一個混合對象的數(shù)組。這些混合實例對象可以像正常的實例對象一樣包含選項,他們將在 Vue.extend() 里最終選擇使用相同的選項合并邏輯合并。
new Vue({
mixins: [baseOptions],
created(){
//do something
console.log('onCreated-2');
}
//其他自定義邏輯
});
// -> onCreated-1
// -> onCreated-2extends
這和 mixins 類似，區(qū)別在于，組件自身的選項會比要擴展的源組件具有更高的優(yōu)先級.
官方文檔是這么寫的,除了優(yōu)先級,可能就剩下接受參數(shù)的類型吧,mixins接受的是數(shù)組.
new Vue({
extends: baseOptions,
created(){
//do something
console.log('onCreated-2');
}
//其他自定義邏輯
});
// -> onCreated-1
// -> onCreated-2從結(jié)果上看,三種方式都能實現(xiàn)需求,但是形式卻有不同.
Vue.extend
Vue.extend只是創(chuàng)建一個構(gòu)造器,他是為了創(chuàng)建可復(fù)用的組件.
mixins,extends
而mixins和extends是為了拓展組件.
從源碼來看通過extend,extends和mixins三種方式接收的options,最終都是通過mergeOptions進行合并的.差異只是官方文檔中提到的優(yōu)先級不同extend > extends > mixins. 所以,如果是簡單的擴展組件功能,三個方式都可以達(dá)到目的.
而這三種方式使用場景上細(xì)化的區(qū)分,目前我也蒙圈中...
//幾種方式的不同示例:
https://jsfiddle.net/willnewi...
選項對象合并策略 Vue.config.optionMergeStrategies
上面提到的選項對象,是在mergeOptions中按照一定策略進行合并的.
打印Vue.config.optionMergeStrategies,你會看默認(rèn)的optionMergeStrategies如下:
mergeHook
子組件和父組件的生命周期事件會合并在一個數(shù)組里。父組件在前，子組件在后。
watch
子組件和父組件的watchers會合并在一個數(shù)組里。父組件在前，子組件在后。
mergeAssets(filters，components，directives)
首先會在子組件里查找，如果沒有，才會沿著原型鏈向上，找父組件中對應(yīng)的屬性。
data 合并規(guī)則
無重復(fù)的屬性保留
同名覆蓋
data中的對象也是相同規(guī)則,無重復(fù)的屬性保留,同名覆蓋
props、methods、computed: 無重復(fù)保留,同名子組件覆蓋父組件
mergeAssets
mergeAssets合并方法里,用到了原型委托.他會先把父組件的屬性放在創(chuàng)建的新對象的原型鏈上.然后擴展新對象
對象里查找屬性的規(guī)則 :舉個例子，當(dāng)查找一個屬性時，如 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
}總結(jié)
Vue.component 注冊全局組件,為了方便
Vue.extend 創(chuàng)建組件的構(gòu)造函數(shù),為了復(fù)用
mixins、extends 為了擴展
看完上述內(nèi)容，你們對extend與component在Vue 中有什么區(qū)別有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝大家的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
文章標(biāo)題：extend與component在Vue中有什么區(qū)別-創(chuàng)新互聯(lián)
本文URL：http://m.jiaotiyi.com/article/cscpcj.html