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钩子函数。

Logo

前往低代码交流专区

更多推荐