vue.mixin 用法 給組件每個生命週期,函數等都混入一些公共邏輯
原理源碼
Vue.mixin = function (mixin: Object) {
this.options = mergeOptions(this.options, mixin); // 將當前定義的屬性合併到每個
組件中
return this
}
核心
export function mergeOptions (
parent: Object,
child: Object,
vm?: Component
): Object {
if (!child._base) {
if (child.extends) { // 遞歸合併extends
parent = mergeOptions(parent, child.extends, vm)
}
if (child.mixins) { // 遞歸合併mixin
for (let i = 0, l = child.mixins.length; i < l; i++) {
parent = mergeOptions(parent, child.mixins[i], vm)
}
}
}
const options = {} // 屬性及生命週期的合併
let key
for (key in parent) {
mergeField(key)
}
for (key in child) {
if (!hasOwn(parent, key)) {
mergeField(key)
}
}
function mergeField (key) {
const strat = strats[key] || defaultStrat
// 調用不同屬性合併策略進行合併
options[key] = strat(parent[key], child[key], vm, key)
}
return options
}