vue源码分析（九）—— 合并配置
文章目录
- 前言
- 1.vue cli 创建一个基本的vue2 项目
- 2.将mian.js文件改成如下
- 3. 运行结果及其疑问？
- 一、使用 `new Vue` 创建过程的 2 种场景
- 二、margeOption的详细说明
- 1.margeOption的方法地址
- 2.合并策略的具体使用
- 3.defaultStrat 默认策略方法
- 三：以生命周期来查看合并策略
- 1. 遍历所有的key执行方法
- 2. LIFECYCLE_HOOKS的key值定义文件路径
- 3. mergeLifecycleHook方法的简单概况
- 四：子组件调用逻辑
- 1. 回到new Vue初始化逻辑中，options的逻辑
- 2. 合并options的逻辑
- 3. initInternalComponent的作用
- 4:子组件合并策略的总结
前言
为什么使用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