第四十一篇:Vue生命周期(二)

好家伙,书接上回

 

上图:(Vue官网中Vue实例图片的下半张)

 

 

以下为解释:

 5.1.1.

 

 

mounted执行完后,表示整个Vue实例已经初始化完毕了;

此时,组件已经脱离了创建阶段;进入到运行阶段

 

5.1.2

 

这一步将内存中编译好的模板,真实地替换到浏览器的页面当中去

 

5.2.

 

Mounted直译是安装,挂载的意思.

 

这里组件运行阶段的生命周期函数,只有两个:beforeUpdata和updated

这两个事件会根据data数据的改变,有选择的触发0到多次

当数据改变,走右边这个圈

 

5.2.1.

 

 当执行beforeUpdate时,,页面中的数据还是旧的.

但此时data数据是最新的,

页面尚未和最新的数据保持同步

 

 5.2.2

这里直译一下就是:虚拟DOm重新渲染并且挂载

 

这一步执行的是:先根据data中最新的数据,在内存中,重新渲染出一份最新的内存DOM树

当最新的DOM树被更新之后,会把最新的内存DOM树,重新渲染到真实的页面中去,

这时候,就完成数据从data(Model层) ->view(视图层)的更新

 

5.2.3.

 

 到这一步,页面和data数据就保持同步了,

 

5.3.1.

 

 当执行这个钩子时,Vue实例就已经从运行阶段进入到了销毁阶段

但其中的data和所有的methods依旧处于可用状态

 

5.3.2.

 

 

 teardown 拆卸

 

5.3.3.

 

 结束了,

组件被完全销毁

其中的data和所有的methods变为不可用状态.

 

补充:关闭网页大概就是'销毁'

 

大概这么多了