(1)mixin 和 extends
mixin 和 extends均是用于合并、拓展组件的,两者均通过 mergeOptions 方法实现合并。
1、mixins 接收一个混入对象的数组,其中混入对象可以像正常的实例对象一样包含实例选项,这些选项会被合并到最终的选项中。Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。
2、extends 主要是为了便于扩展单文件组件,接收一个对象或构造函数。
![](https://i-blog.csdnimg.cn/blog_migrate/cce3ca79cef6830cb0fc0a53353e92dc.jpeg)
(2)mergeOptions 的执行过程
1、规范化选项(normalizeProps、normalizelnject、normalizeDirectives)
2、对未合并的选项,进行判断
if(!child._base) {
if(child.extends) {
parent = mergeOptions(parent, child.extends, vm)
}
if(child.mixins) {
for(let i = 0, l = child.mixins.length; i < l; i++){
parent = mergeOptions(parent, child.mixins[i], vm)
}
}
}
3、合并处理。根据一个通用 Vue 实例所包含的选项进行分类逐一判断合并,如 props、data、 methods、watch、computed、生命周期等,将合并结果存储在新定义的 options 对象里。
4、返回合并结果 options