本文实例分析了 vue 生命周期. 分享给大家供大家参考, 具体如下:
每个 Vue 实例都存在完整的生命周期, 经历从创建, 初始化数据, 编译模板, 挂载 Dom, 渲染更新渲染, 销毁等一系列过程. 如下图所示
钩子函数
vue 的完整生命周期可分为三个阶段: 初始化阶段, 运行阶段和销毁阶段. 共存在很多钩子函数, 他们在 vue 生命周期不同的阶段进行操作, 列举如下:
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
钩子函数说明
beforeCreate
通过 new Vue() 创建 vue 实例, vue 的生命周期便拉开了序幕, 首先会执行 beforeCreate 钩子函数. 此时的 vue 实例只是一个空壳, 还未挂载 DOM 元素, 无法访问到数据和真实的 dom, 一般不做操作.
created
这个时候已经可以使用到数据, 也可以更改数据, 在这里更改数据不会触发 updated 函数和不会触发其他钩子函数, 一般可以在这里做初始数据的获取.
beforeMount
在这个函数中虚拟 dom 已经创建完成 (马上就要渲染), 这里也可以更改数据, 不会触发 updated, 在这里可以在渲染前最后一次更改数据的机会, 不会触发其他的钩子函数.
mounted
在这个函数调用时, 组件已经出现在页面中, 数据, 真实 dom 都已经处理好了, 事件都已经挂载好了, 可以在这里操作真实 dom 等事情.
beforeUpdate
当组件或实例的数据更改之后, 会立即执行 beforeUpdate, 然后 vue 的虚拟 dom 机制会重新构建虚拟 dom 与上一次的虚拟 dom 树利用 diff 算法进行对比之后重新渲染.
updated
当更新完成后, 执行 updated, 数据已经更改完成, dom 也重新 render 完成, 可以操作更新后的虚拟 dom.
beforeDestroy
当通过某种方式调用 $destroy 方法后, 立即执行 beforeDestroy 函数做一些善后工作, 如清除计时器, 清除非指令绑定的事件等.
destroyed
组件的数据绑定, 监听等去掉后只剩下 dom 空壳, 此时执行 destroyed. 当然, 也可以在这里完成上述操作.
vue 的生命周期: 从出生到加载 到 销毁 有一套完整的生命周期过程
能够让我们进行在不同时期去写不同的代码 去做不同的事情
钩子函数: 就是不同的生命周期 vue 给我们暴露出来的 回调函数
示例:
- var vn = new Vue({
- el:'.box',
- data:{
- msg:'<h1 > 呵呵 </h1>'
- },
- beforeCreate:function() {
- alert("实例要创建了, 要开始表演了");
- },
- created:function() {
- alert('vue 实例已经 new 出来了, 方法和属性还没有编译');
- },
- beforeMount:function() {
- alert('vue 实例已经创建完成, 马上要执行内部属性和方法的编译');
- },
- mounted:function() {
- alert('对象和属性已经编译完成');
- },
- beforeUpdate:function() {
- alert('数据马上更新, 没保存赶紧保存');
- },
- updated:function() {
- alert('数据已经更新');
- },
- beforeDestroy:function() {
- alert('vue 实例已经走到尽头了');
- },
- destroyed:function() {
- alert("vue 实例永远活在我们心中!!!");
- }
- })
来源: http://www.jb51.net/article/145668.htm