詳解vue mixins和extends的巧妙用法

vue提供了mixins、extends配置項(xiàng)，最近使用中發(fā)現(xiàn)很好用。

混合mixins和繼承extends

看看官方文檔怎么寫(xiě)的，其實(shí)兩個(gè)都可以理解為繼承，mixins接收對(duì)象數(shù)組（可理解為多繼承），extends接收的是對(duì)象或函數(shù)（可理解為單繼承）。

繼承鉤子函數(shù)

const extend = {
 created () {
  console.log('extends created')
 }
}
const mixin1 = {
 created () {
  console.log('mixin1 created')
 }
}
const mixin2 = {
 created () {
  console.log('mixin2 created')
 }
}
export default {
 extends: extend,
 mixins: [mixin1, mixin2],
 name: 'app',
 created () {
  console.log('created')
 }
}

控制臺(tái)輸出

extends created
mixin1 created
mixin2 created
created

• 結(jié)論: 優(yōu)先調(diào)用mixins和extends繼承的父類(lèi)，extends觸發(fā)的優(yōu)先級(jí)更高，相對(duì)于是隊(duì)列
• push(extend, mixin1, minxin2, 本身的鉤子函數(shù))
• 經(jīng)過(guò)測(cè)試， watch的值 繼承規(guī)則一樣。

繼承methods

const extend = {
 data () {
  return {
   name: 'extend name'
  }
 }
}
const mixin1 = {
 data () {
  return {
   name: 'mixin1 name'
  }
 }
}
const mixin2 = {
 data () {
  return {
   name: 'mixin2 name'
  }
 }
}
// name = 'name'
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app',
 data () {
  return {
   name: 'name'
  }
 }
}
// 只寫(xiě)出子類(lèi)，name = 'mixin2 name'，extends優(yōu)先級(jí)高會(huì)被mixins覆蓋
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app'
}
// 只寫(xiě)出子類(lèi)，name = 'mixin1 name'，mixins后面繼承會(huì)覆蓋前面的
export default {
 mixins: [mixin2, mixin1],
 extends: extend,
 name: 'app'
}

• 結(jié)論：子類(lèi)再次聲明，data中的變量都會(huì)被重寫(xiě)，以子類(lèi)的為準(zhǔn)。
• 如果子類(lèi)不聲明，data中的變量將會(huì)最后繼承的父類(lèi)為準(zhǔn)。
• 經(jīng)過(guò)測(cè)試， props中屬性 、 methods中的方法 和 computed的值 繼承規(guī)則一樣。

下面單獨(dú)介紹下mixins、extends、extend

mixins

調(diào)用方式: mixins: [mixin1, mixin2]

是對(duì)父組件的擴(kuò)充，包括methods、components、directive等。。。

觸發(fā)鉤子函數(shù)時(shí)，先調(diào)用mixins的函數(shù)，再調(diào)用父組件的函數(shù)。

雖然也能在創(chuàng)建mixin時(shí)添加data、template屬性，但當(dāng)父組件也擁有此屬性時(shí)以父為準(zhǔn)，從這一點(diǎn)也能看出制作者的用心（擴(kuò)充）。

data、methods內(nèi)函數(shù)、components和directives等鍵值對(duì)格式的對(duì)象均以父組件/實(shí)例為準(zhǔn)

extends

調(diào)用方式: extends: CompA

同樣是對(duì)父組件的擴(kuò)充，與mixins類(lèi)似，但優(yōu)先級(jí)均次于父組件

extend

擴(kuò)展組件的構(gòu)造器

當(dāng)我們調(diào)用vue.component('a', {...})時(shí)自動(dòng)調(diào)用

值得注意的是extend內(nèi)的data為一個(gè)函數(shù)

總結(jié)

以上所述是小編給大家介紹的vue mixins和extends的巧妙用法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！