我们知道 vue 是一个构建数据驱动的 web 界面的渐进式框架, 那么 vue 生命周期是什么呢? 本篇文章就给大家来介绍一下 vue 生命周期的内容, 希望可以帮助到有需要的朋友.
Vue 生命周期是指 vue 实例对象从创建之初到销毁的过程, vue 所有功能的实现都是围绕其生命周期进行的, 在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和 DOM 渲染两大重要功能.
我们来看一下官网给的 vue 生命周期的图:
我们接下来就来详细看看这个 vue 生命周期图
从上面这幅图中, 我们可以看到 vue 生命周期可以分为八个阶段, 分别是:
beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁前),destroyed(销毁后)
下面我们就来分别看看 vue 生命周期的这八个阶段:
1, 创建前 (beforeCreate)
对应的钩子函数为 beforeCreate. 此阶段为实例初始化之后, 此时的数据观察和事件机制都未形成, 不能获得 DOM 节点.
2, 创建后 (created)
对应的钩子函数为 created. 在这个阶段 vue 实例已经创建, 仍然不能获取 DOM 元素.
3, 载入前 (beforeMount)
对应的钩子函数是 beforemount, 在这一阶段, 我们虽然依然得不到具体的 DOM 元素, 但 vue 挂载的根节点已经创建, 下面 vue 对 DOM 的操作将围绕这个根元素继续进行; beforeMount 这个阶段是过渡性的, 一般一个项目只能用到一两次.
4, 载入后 (mounted)
对应的钩子函数是 mounted.mounted 是平时我们使用最多的函数了, 一般我们的异步请求都写在这里. 在这个阶段, 数据和 DOM 都已被渲染出来.
5, 更新前 (beforeUpdate)
对应的钩子函数是 beforeUpdate. 在这一阶段, vue 遵循数据驱动 DOM 的原则; beforeUpdate 函数在数据更新后虽然没立即更新数据, 但是 DOM 中的数据会改变, 这是 Vue 双向数据绑定的作用.
6, 更新后 (updated)
对应的钩子函数是 updated. 在这一阶段 DOM 会和更改过的内容同步.
7, 销毁前 (beforeDestroy)
对应的钩子函数是 beforeDestroy. 在上一阶段 vue 已经成功的通过数据驱动 DOM 更新, 当我们不在需要 vue 操纵 DOM 时, 就需要销毁 Vue, 也就是清除 vue 实例与 DOM 的关联, 调用 destroy 方法可以销毁当前组件. 在销毁前, 会触发 beforeDestroy 钩子函数.
8, 销毁后 (destroyed)
对应的钩子函数是 destroyed. 在销毁后, 会触发 destroyed 钩子函数.
vue 的生命周期的思想贯穿在组件开发的始终, 通过熟悉其生命周期调用不同的钩子函数, 我们可以准确地控制数据流和其对 DOM 的影响; vue 生命周期的思想是 Vnode 和 MVVM 的生动体现和继承.
来源: http://www.css88.com/qa/vue-js/14817.html