深入淺析Vue中mixin和extend的區(qū)別和使用場(chǎng)景
Vue中有兩個(gè)較為高級(jí)的靜態(tài)方法mixin和extend,接下來(lái)我們來(lái)討論下關(guān)于他們各自的原理和使用場(chǎng)景。
Mixin:
原理:
先來(lái)看看官網(wǎng)的介紹:
參數(shù):{Object} mixin
用法:
混入也可以進(jìn)行全局注冊(cè)。使用時(shí)格外小心!一旦使用全局混入,它將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例。使用恰當(dāng)時(shí),這可以用來(lái)為自定義選項(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
也就是說(shuō),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ù),通過(guò)源碼我們可以看到這個(gè)傳遞進(jìn)來(lái)的對(duì)象最終會(huì)和我們?cè)诔跏蓟瘜?shí)例也就是new Vue(options)時(shí)的這個(gè)options合并(通過(guò)上面源碼中的mergeOptions方法),保存在option上。
使用場(chǎng)景:
當(dāng)我們需要全局去注入一些methods,filter或者h(yuǎn)ooks時(shí)我們就可以使用mixin來(lái)做。 比如我們希望每一個(gè)Vue實(shí)例都有一個(gè)print方法,我們就可以這么做:
Vue.mixin({
methods: {
print() {
console.log(`我是一個(gè)通過(guò)mixin注入的方法!`)
}
}
})
或者我們想要去監(jiān)聽(tīng)在什么階段時(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:
原理:
先來(lái)看看官網(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')
再來(lái)看看源碼里面關(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,也就是說(shuō)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)來(lái)的配置option和Vue原來(lái)的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)來(lái)的配置行為。
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ì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個(gè)封裝
本篇文章主要介紹了詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個(gè)封裝,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
vue3模塊創(chuàng)建runtime-dom源碼解析
這篇文章主要為大家介紹了vue3模塊創(chuàng)建runtime-dom源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
解決vuejs項(xiàng)目里css引用背景圖片不能顯示的問(wèn)題
今天小編就為大家分享一篇解決vuejs項(xiàng)目里css引用背景圖片不能顯示的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue.js使用v-if實(shí)現(xiàn)顯示與隱藏功能示例
這篇文章主要介紹了vue.js使用v-if實(shí)現(xiàn)顯示與隱藏功能,結(jié)合簡(jiǎn)單實(shí)例形式分析了使用v-if進(jìn)行判斷實(shí)現(xiàn)元素的顯示與隱藏功能,需要的朋友可以參考下2018-07-07
Vue+Element UI 實(shí)現(xiàn)視頻上傳功能
這篇文章主要介紹了Vue+Element UI 實(shí)現(xiàn)視頻上傳功能,前臺(tái)使用Vue+Element UI中的el-upload組件實(shí)現(xiàn)視頻上傳及進(jìn)度條展示,后臺(tái)提供視頻上傳API并返回URL,具體實(shí)現(xiàn)代碼及效果展示跟隨小編一起看看吧2022-01-01
Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互
這篇文章主要介紹了Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03
Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖
這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03

