Vue2.0生命周期

来源:互联网 发布:php命名空间的作用 编辑:程序博客网 时间:2024/05/16 13:02

beforeCreate: 

此时$data和$el都不存在

1.遍历data所有属性,通过Object.defineProperty把这些属性全部转为getter/setter,并通过watcher(每个vue实例都会有一个)对属性Observe记录为依赖。

2. 初始化各种event。

created:

此时$data已经存在,$el还不存在

检查是否有el选项,有的话检查是否有template选项没有的话等vm.$mout(el)后再去检查是否有template选项 → 如果有template选项会去compile template并丢到render funtion里,如果没有template选项会去Compile el’s 的outerHTML做为template。

beforeMount:

此时$el已经存在了,但是UI上显示的data属性为virtual Dom的属性

创建vm.$el并用它替换’el’选项。

mounted:

$data和$el已经挂载完成,监听data change并rerender UI

beforeUpdate、updated:

Virtual Dom 重新渲染UI

beforeDestroy:

Teardown watchers,childcomponents and event listeners

destroyed:

Teardown done



参考文章:

https://cn.vuejs.org/v2/guide/reactivity.html

https://segmentfault.com/a/1190000008010666