深入淺析Vue中mixin和extend的區(qū)別和使用場(chǎng)景
Vue中有兩個(gè)較為高級(jí)的靜態(tài)方法mixin和extend,接下來我們來討論下關(guān)于他們各自的原理和使用場(chǎng)景。
Mixin:
原理:
先來看看官網(wǎng)的介紹:
參數(shù):{Object} mixin
用法:
混入也可以進(jìn)行全局注冊(cè)。使用時(shí)格外小心!一旦使用全局混入,它將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例。使用恰當(dāng)時(shí),這可以用來為自定義選項(xiàng)注入處理邏輯。
// 為自定義的選項(xiàng) 'myOption' 注入一個(gè)處理器。 Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) new Vue({ myOption: 'hello!' }) // => "hello!"
我們知道,Vue.mixin傳遞的這個(gè)參數(shù)對(duì)象,在初始化Vue實(shí)例的時(shí)候會(huì)merge到options上,下面是Vue源碼中對(duì)mixin的操作。
// src\core\global-api\mixin.js export function initMixin (Vue: GlobalAPI) { Vue.mixin = function (mixin: Object) { this.options = mergeOptions(this.options, mixin) return this } } // src\core\instance\index.js function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options) } initMixin(Vue) ... export default Vue
也就是說,mixin只是對(duì)我們?cè)诔跏蓟疺ue實(shí)例時(shí)傳遞的配置對(duì)象的一個(gè)擴(kuò)展。
就像上面官網(wǎng)實(shí)例寫的例子,我們?cè)趫?zhí)行Vue.mixin方法時(shí)傳遞一個(gè)配置對(duì)象進(jìn)去,對(duì)象里面有個(gè)created勾子函數(shù),通過源碼我們可以看到這個(gè)傳遞進(jìn)來的對(duì)象最終會(huì)和我們?cè)诔跏蓟瘜?shí)例也就是new Vue(options)
時(shí)的這個(gè)options合并(通過上面源碼中的mergeOptions方法),保存在option上。
使用場(chǎng)景:
當(dāng)我們需要全局去注入一些methods,filter或者h(yuǎn)ooks時(shí)我們就可以使用mixin來做。 比如我們希望每一個(gè)Vue實(shí)例都有一個(gè)print方法,我們就可以這么做:
Vue.mixin({ methods: { print() { console.log(`我是一個(gè)通過mixin注入的方法!`) } } })
或者我們想要去監(jiān)聽在什么階段時(shí)什么組件被加載了,被卸載了等等,我們可以這么做:
Vue.mixin({ mounted() { console.log(`${this.$route.name} component mounted!`) }, destroyed() { console.log(`${this.$route.name} component destroyed!`) } })
如果我們并不想給每一個(gè)組件實(shí)例都混入這些配置options,而只是個(gè)別的組件,最好不要使用mixin,它可能會(huì)影響到我們組件的性能。
Extend:
原理:
先來看看官網(wǎng)的介紹:
參數(shù):{Object} options
用法:
使用基礎(chǔ) Vue 構(gòu)造器,創(chuàng)建一個(gè)“子類”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。
data 選項(xiàng)是特例,需要注意 - 在 Vue.extend()
中它必須是函數(shù)。
data必須是函數(shù)是為了防止各個(gè)實(shí)例的數(shù)據(jù)混亂,閉包的應(yīng)用。
<div id="mount-point"></div> // 創(chuàng)建構(gòu)造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 創(chuàng)建 Profile 實(shí)例,并掛載到一個(gè)元素上。 new Profile().$mount('#mount-point')
再來看看源碼里面關(guān)于Vue.extend的實(shí)現(xiàn):
Vue.extend = function (extendOptions: Object): Function { extendOptions = extendOptions || {} const Super = this const SuperId = Super.cid const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {}) if (cachedCtors[SuperId]) { return cachedCtors[SuperId] } const name = extendOptions.name || Super.options.name if (process.env.NODE_ENV !== 'production' && name) { validateComponentName(name) } const Sub = function VueComponent (options) { this._init(options) } Sub.prototype = Object.create(Super.prototype) Sub.prototype.constructor = Sub Sub.cid = cid++ Sub.options = mergeOptions( Super.options, extendOptions ) Sub['super'] = Super // For props and computed properties, we define the proxy getters on // the Vue instances at extension time, on the extended prototype. This // avoids Object.defineProperty calls for each instance created. if (Sub.options.props) { initProps(Sub) } if (Sub.options.computed) { initComputed(Sub) } // allow further extension/mixin/plugin usage Sub.extend = Super.extend Sub.mixin = Super.mixin Sub.use = Super.use // create asset registers, so extended classes // can have their private assets too. ASSET_TYPES.forEach(function (type) { Sub[type] = Super[type] }) // enable recursive self-lookup if (name) { Sub.options.components[name] = Sub } // keep a reference to the super options at extension time. // later at instantiation we can check if Super's options have // been updated. Sub.superOptions = Super.options Sub.extendOptions = extendOptions Sub.sealedOptions = extend({}, Sub.options) // cache constructor cachedCtors[SuperId] = Sub return Sub } }
首先我們可以看到,extend方法返回的Sub其實(shí)是一個(gè)構(gòu)造函數(shù),而且繼承自Vue,也就是說extend方法返回的是Vue的一個(gè)子類。
Sub.prototype = Object.create(Super.prototype) Sub.prototype.constructor = Sub
這兩行代碼其實(shí)就是實(shí)現(xiàn)Sub對(duì)Vue的繼承,源碼中有一行是
const Super = this
所以這里的Super指的就是Vue。
Sub.options = mergeOptions( Super.options, extendOptions )
我們注意到在extend中也會(huì)對(duì)傳進(jìn)來的配置option和Vue原來的options做一個(gè)合并。
使用場(chǎng)景:
當(dāng)我們不需要全局去混入一些配置,比如,我們想要獲得一個(gè)component。我們可以使用Vue.component(),
也可以使用Vue.extend()。
const ChildVue = Vue.extend({ ...options }) new ChildVue({ ...options })
注意extend得到的是一個(gè)Vue的子類,也就是構(gòu)造函數(shù)。
區(qū)別:
mixin是對(duì)Vue類的options進(jìn)行混入。所有Vue的實(shí)例對(duì)象都會(huì)具備混入進(jìn)來的配置行為。
extend是產(chǎn)生一個(gè)繼承自Vue類的子類,只會(huì)影響這個(gè)子類的實(shí)例對(duì)象,不會(huì)對(duì)Vue類本身以及Vue類的實(shí)例對(duì)象產(chǎn)生影響。
總結(jié)
以上所述是小編給大家介紹的Vue中mixin和extend的區(qū)別和使用場(chǎng)景,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
vue路由事件beforeRouteLeave及組件內(nèi)定時(shí)器的清除方法
今天小編就為大家分享一篇vue路由事件beforeRouteLeave及組件內(nèi)定時(shí)器的清除方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09一文詳細(xì)聊聊vue3的defineProps、defineEmits和defineExpose
vue3官方文檔defineProps和defineEmits都是只能在scriptsetup中使用的編譯器宏,下面這篇文章主要給大家介紹了關(guān)于vue3的defineProps、defineEmits和defineExpose的相關(guān)資料,需要的朋友可以參考下2023-02-02對(duì)vue v-if v-else-if v-else 的簡(jiǎn)單使用詳解
今天小編就為大家分享一篇對(duì)vue v-if v-else-if v-else 的簡(jiǎn)單使用詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染(SSR)
直接使用 Vue 構(gòu)建前端單頁(yè)面應(yīng)用,頁(yè)面源碼時(shí)只有簡(jiǎn)單的幾行 html,這并不利于網(wǎng)站的 SEO,這時(shí)候就需要服務(wù)端渲染,本篇文章主要介紹了詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染(SSR),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04element組件中自定義組件的樣式不生效問題(vue scoped scss無效)
這篇文章主要介紹了解決element組件中自定義組件的樣式不生效問題(vue scoped scss無效),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09解決vue+element 鍵盤回車事件導(dǎo)致頁(yè)面刷新的問題
今天小編就為大家分享一篇解決vue+element 鍵盤回車事件導(dǎo)致頁(yè)面刷新的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08總結(jié)4個(gè)方面優(yōu)化Vue項(xiàng)目
在本篇文章里我們給大家整理了一篇關(guān)于優(yōu)化VUE項(xiàng)目的四個(gè)總要點(diǎn),對(duì)此有需要的朋友們學(xué)習(xí)下天。2019-02-02