vue生命周期

249 阅读1分钟

1、实例化vue,调用_init方法,合并配置项-vue上的选项和用户自定义的选项合并,初始化生命周期,初始化自定义事件-$开头的那些,初始化渲染函数,调用beforeCreat,此时还没有完成数据的观测.

2、调用initStates初始化props,data,computed,watcher等,此时通过深度遍历data上的属性,通过object.defineproperty给属性通过get和set做双向数据绑定,调用created,此时完成数据的观测。

3、判断是否有el选项,没有el就等待调用mount完成手动挂载,如果存在直接内部调用mount方法,方法内部实际调用的是mount实现实例挂载,首先判断是否有render选项,其次是template,最后是el选项,template和el需要在线编译成render函数,接着调用原型mount方法,实际调用的是mountComponent方法,调用beforeMount,此时可访问$el属性。

4、定义updateComponent函数,mountComponent的核心就是先实例化一个渲染 Watcher,在它的回调函数中会调用 updateComponent 方法,在此方法中调用 vm._render 方法先生成虚拟 Node,最终调用 vm._update 生成真实dom并插入更新 DOM,接着调用Mounted,此时dom已经渲染完成。

5、当数据更新之前会调用beforeupdate,完成之后调用updated。 6、实例销毁前调用beforeDestroy,销毁完成调用destroied。

总结

在 created 钩子函数中可以访问到数据,在 mounted 钩子函数中可以访问到 DOM,在 destroy 钩子函数中可以做一些定时器销毁工作