vue 页面销毁函数_45. 聊聊 Vue 的生命周期

Vue 的生命周期指的是组件从创建到销毁所经历的一系列的过程，在这个过程中，Vue 提供了一些生命周期的钩子函数，使得我们能够在其各个生命阶段有机会执行额外的任务。

Vue 一共有 4 个生命周期的阶段，分别是创建(Create)、挂载(Mount)、更新(Update)和销毁(Destroy)阶段，每个阶段都对应前(beforeXxx)和后(xxxed)两个生命周期的钩子函数。

Create 阶段

• beforeCreate 钩子函数，在实例初始化之后，在数据监听和事件配置之前触发，注意，在这个钩子函数中我们是获取不到 data 数据的

• created 钩子函数，在实例创建完成后触发，此时可以访问 data、methods 等属性，但此时组件还没有被挂载到页面中去，所以这个时候访问不到 $el 属性。通常在这个函数中进行一些页面初始化的工作，例如通过 ajax 异步请求后端数据来初始化页面。

Mount 阶段

• beforeMount 钩子函数，在组件被挂载到页面之前触发，在 beforeMount 之前，会找到对应的 template，并编译成 render 函数

• mounted 钩子函数，在组件挂载到页面之后触发，此时可以通过 DOM API 获取到页面中的 DOM 元素

Update 阶段

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

• updated 钩子函数，在虚拟 DOM 重新渲染和打补丁之后调用

Destroy 阶段

• beforeDestroy 钩子函数，在实例销毁之前调用，一般在这一步我们可以销毁定时器、解绑全局事件等

• destroyed 钩子函数，在实例销毁之后调用，调用后，Vue 实例中的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

我们可以结合官网生命周期图示并加以注释来理解，图示如下：

keep-alive

除了上述生命周期钩子函数外，当我们使用 keep-alive 的时候，还有两个钩子函数，分别是 activated 和 deactivated 。

用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。