vue mixins和extends的妙用

寫在前面

vue提供了mixins、extends配置項，最近使用中發現很好用。若有不對請指正，感謝尤大提供高效生產工具。

混合mixins和繼承extends

看看官方文檔怎麼寫的，其實兩個均可以理解爲繼承，mixins接收對象數組（可理解爲多繼承），extends接收的是對象或函數（可理解爲單繼承）。

繼承鉤子函數

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
複製代碼

• 結論: 優先調用mixins和extends繼承的父類，extends觸發的優先級更高，相對因而隊列
• push(extend, mixin1, minxin2, 自己的鉤子函數)
• 通過測試，watch的值繼承規則同樣。

繼承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優先級高會被mixins覆蓋
export default {
  mixins: [mixin1, mixin2],
  extends: extend,
  name: 'app'
}
複製代碼

// 只寫出子類，name = 'mixin1 name'，mixins後面繼承會覆蓋前面的
export default {
  mixins: [mixin2, mixin1],
  extends: extend,
  name: 'app'
}
複製代碼

• 結論：子類再次聲明，data中的變量都會被重寫，以子類的爲準。
• 若是子類不聲明，data中的變量將會最後繼承的父類爲準。
• 通過測試，props中屬性、methods中的方法和computed的值繼承規則同樣。

寫在後面

關於mixins和extend你能夠理解爲mvc的c(controller)，這一層。可見通用的成員變量（包括屬性和方法）抽象成爲一個父類，提供給子類繼承，這樣能夠讓子類擁有一些通用成員變量，然而子類也能夠重寫父類的成員變量。這樣的整個編程思想就很面向對象，也就是繼承性。

• extends用來繼承現成組件也很是的經常使用。可參考以前寫過一篇：《基於element-ui實現table可配置化》，擴展element-ui的el-table-column組件。