第四十一篇: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变为不可用状态.

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

大概这么多了