vue学习二：vue初始化的过程一（实例初始化、生命周期beforecreate---create）

vue的MVVM模式看完后，接下来看一下，new Vue（{}）加载的过程是什么：

 

 

从_init方法进入分析主要分三块

 

先分析实例初始化：

1.initLifecycle(vm)initLifecycle(vm)： 生命周期变量初始化

options.abstract用于判断是否是抽象组件，组件的父子关系建立会跳过抽象组件，抽象组件比如keep-alive、transition等。所有的子组件$root都指向顶级组件。

 

2.initEvents(vm)： 事件监听初始化

最终调用

总体意思是处理父元素的event。

3.initRender(vm)：渲染初始化

4.callHook(vm, 'beforeCreate');生命周期： 回调钩子beforeCreate

5.initInjections、initProvide(vm,propsOptions)

这两个配套使用，用于将父组件_provided中定义的值，通过inject注入到子组件，且这些属性不会被观察

6.initState(vm)

这里的initProps是对props各项验证：

initData是对data开始进行数据观测了：

initMethods

遍历methods,将methods中的方法挂在vm实例上，注意这里调用了bind函数，故methods中所有方法的this都是vm对象

运行到这边我们看一下vm现在已经有什么了：

7.callHook(vm, 'created') 生命周期： 回调钩子 created

create阶段，基本就是对传入数据的格式化、数据的双向绑定、以及一些属性的初始化。

 

总结：

_init 函数分为3步

1：合并options

2. 调用初始化函数

3. 挂载到DOM — $mount

beforeCreate：

是拿不到数据的比如定义在，props、methods、data、computed、watch中的，因为它在initState(vm)之前执行

created

是可以拿到数据的的，因为它在initState(vm)之后执行

在这俩个钩子函数执行的时候，并没有渲染 DOM，所以不能够访问 DOM，一般来说，如果组件在加载的时候需要和后端有交互，放在这俩个钩子函数执行都可以，如果是需要访问 props、data 等数据的话，就需要使用created钩子函数。