詳解vue mixins和extends的巧妙用法

更新時間：2017年12月20日 09:12:00 投稿：mrr

vue提供了mixins、extends配置項，最近使用中發(fā)現(xiàn)很好用。下面小編通過本文給大家介紹下vue中 mixins和extends的巧妙用法，需要的朋友參考下吧

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

混合mixins和繼承extends

看看官方文檔怎么寫的，其實兩個都可以理解為繼承，mixins接收對象數(shù)組（可理解為多繼承），extends接收的是對象或函數(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')
 }
}

控制臺輸出

extends created
mixin1 created
mixin2 created
created

結(jié)論: 優(yōu)先調(diào)用mixins和extends繼承的父類，extends觸發(fā)的優(yōu)先級更高，相對于是隊列
push(extend, mixin1, minxin2, 本身的鉤子函數(shù))
經(jīng)過測試， 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'
  }
 }
}
// 只寫出子類，name = 'mixin2 name'，extends優(yōu)先級高會被mixins覆蓋
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app'
}
// 只寫出子類，name = 'mixin1 name'，mixins后面繼承會覆蓋前面的
export default {
 mixins: [mixin2, mixin1],
 extends: extend,
 name: 'app'
}