寫在前面
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元件。