One Hundred Years of Solitude

扬帆,启航!

vue2.0笔记-生命周期

生命周期:Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期,各个阶段有相对应的事件钩子

生命周期图示

《vue2.0笔记-生命周期》

生命周期钩子

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

直接借用代码直观显示

控制台输出如下图:
《vue2.0笔记-生命周期》
由上图得知:

* 1.beforeCrete: 此时,$el和data都为undefined,没有初始化
* 2.created: 创建后data初始化了,而$el没有
* 3.brforeMount: 挂在之前,$el和data都初始化了,但是message的还没有同步到页面的{{message}}里
* 4.mounted: Vue实例挂载完成了,{{message}}成功变成 “Vue的生命周期”

beforeCreate:创建之前的状态

created:创建完毕的状态

beforeMount:挂载前的状态

mounted:挂载完毕的状态

数据更新(update)

在控制台里输入vm.message = ‘数据更新了’
《vue2.0笔记-生命周期》

*当一个数据发生改变时,你的视图也将随之改变,整个更新的过程是:数据改变——导致虚拟DOM的改变——调用这两个生命钩子去改变视图
*这个数据只有和模版中的数据绑定了才会发生更新

beforeDestory和destoryed

《vue2.0笔记-生命周期》

*在beferoDestory生命钩子调用之前,所有实例都可以用
*但是当调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

推荐一篇对vue生命周期诠释的比较好的文章:vue 生命周期深入

点赞

发表评论

电子邮件地址不会被公开。