快速了解 Vue 的各个生命周期函数

Vue 一共有 8 个生命阶段，分别是创建前、创建后、加载前、加载后、更新前、更新后、销毁

前和销毁后，每个阶段对应了一个生命周期的钩子函数。

（ 1 ） beforeCreate 钩子函数，在实例初始化之后，在数据监听和事件配置之前触发。因此在

这个事件中我们是获取不到 data 数据的。

（ 2 ） created 钩子函数，在实例创建完成后触发，此时可以访问 data 、 methods 等属性。但

这个时候组件还没有被挂载到页面中去，所以这个时候访问不到 $el 属性。一般我们可以在这

个函数中进行一些页面初始化的工作，比如通过 ajax 请求数据来对页面进行初始化。

（ 3 ） beforeMount 钩子函数，在组件被挂载到页面之前触发。在 beforeMount 之前，会找

到对应的 template ，并编译成 render 函数。

（ 4 ） mounted 钩子函数，在组件挂载到页面之后触发。此时可以通过 DOM API 获取到页面中

的 DOM 元素。 （ 5 ） beforeUpdate 钩子函数，在响应式数据更新时触发，发生在虚拟 DOM 重新渲染和打补 丁之前，这个时候我们可以对可能会被移除的元素做一些操作，比如移除事件监听器。

（ 6 ） updated 钩子函数，虚拟 DOM 重新渲染和打补丁之后调用。

（ 7 ） beforeDestroy 钩子函数，在实例销毁之前调用。一般在这一步我们可以销毁定时器、

解绑全局事件等。

（ 8 ） destroyed 钩子函数，在实例销毁之后调用，调用后， Vue 实例中的所有东西都会解除

绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

当我们使用 keep-alive 的时候，还有两个钩子函数，分别是 activated 和 deactivated 。

用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated

钩子函数，命中缓存渲染后会执行 actived 钩子函数。

（完结）

如果对你有所帮助，请扫码小程序，给个流量支持吧