vue源码分析（九）—— 合并配置

---

前言

为什么使用mixin中使用生命周期方法created，会重复执行两次？

1.vue cli 创建一个基本的vue2 项目

2.将mian.js文件改成如下

3. 运行结果及其疑问？

---

一、使用 new Vue 创建过程的 2 种场景

（1）一种是代码主动调用 new Vue(options) 的方式实例化一个 Vue 对象
（2）一种是组件过程中内部通过 new Vue(options) 实例化子组件。（先创建一个父节点占位符，然后再遍历所有子 VNode 递归调用 createElm，在遍历的过程中，如果遇到子 VNode 是一个组件的 VNode，则重复本节开始的过程，这样通过一个递归的方式就可以完整地构建了整个组件树。）

无论哪种方式，都需要调用一个方法margeOption，路径为src/core/instance/init.tss

二、margeOption的详细说明

1.margeOption的方法地址

2.合并策略的具体使用

3.defaultStrat 默认策略方法

这个方法很简单：没有子级，返回父级，有子级返回自己

const defaultStrat = function (parentVal: any, childVal: any): any {
  return childVal === undefined ? parentVal : childVal
}

三：以生命周期来查看合并策略

1. 遍历所有的key执行方法

2. LIFECYCLE_HOOKS的key值定义文件路径

其实就是生命周期的key的定义

3. mergeLifecycleHook方法的简单概况

四：子组件调用逻辑

1. 回到new Vue初始化逻辑中，options的逻辑

2. 合并options的逻辑

3. initInternalComponent的作用

== 就是简单的给当前的vm对象赋值，生成了一个新的$options==

4:子组件合并策略的总结

就是调用了init方法，然后调用initInternalComponent方法，将传入的子组件的值重新赋值，生成了一个新的options