文章目录
- 前言
- 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