mixin的使用和原理
标签:Vue,mixin,parent,vue2,源码,key,child,options From: https://www.cnblogs.com/dgqp/p/17343726.html
使用:
可以通过
Vue.mixin
来实现逻辑的复用,问题在于数据来源不明确。声明的时候可能对导致命名冲突vue3
采用的就是compositionAPI
局部混入:
var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // 混入 Vue.component('componentA',{ mixins: [myMixin] })
全局混入
Vue.mixin({ created: function () { console.log("全局混入") } })
原理:
初始化混入
initMixin
export function initMixin(Vue: GlobalAPI) { Vue.mixin = function (mixin: Object) { // this==Vue // 最终合并将mixin对象和Vue.options合并在一起 this.options = mergeOptions(this.options, mixin); return this; }; }
主要是
mergeOptions
方法。分析这个函数:将
options
合并,最终合并将mixin
对象和Vue.options
合并在一起export function mergeOptions ( parent: Object, child: Object, vm?: Component ): Object { if (child.mixins) { // 判断有没有mixin 也就是mixin里面挂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) // 先遍历parent的key 调对应的strats[XXX]方法进行合并 } for (key in child) { if (!hasOwn(parent, key)) { // 如果parent已经处理过某个key 就不处理了 mergeField(key) // 处理child中的key 也就parent中没有处理过的key } } // 策略模式 function mergeField (key) { const strat = strats[key] || defaultStrat options[key] = strat(parent[key], child[key], vm, key) // 根据不同类型的options调用strats中不同的方法进行合并 } return options }
注意:
- 优先递归处理
mixins
- 先遍历合并
parent
中key
,调用mergeField
方法进行合并,然后保存变量options
- 再遍历
child
,合并补上parent
中没有的key
,调用mergeField
方法进行合并,保存在变量options
- 通过
mergeField
函数进行了合并