Vue.js 是一个流行的 JavaScript 前端框架，它的生命周期和销毁钩子是开发 Vue.js 应用程序所需了解的重要概念。Vue.js 的生命周期指的是组件在创建、更新和销毁期间所经历的一系列事件，而销毁钩子则是在组件从 DOM 中删除时执行的函数。本文将深入探讨 Vue.js 的完整生命周期和销毁钩子，包括其执行顺序和用途。
Vue.js 的完整生命周期
Vue.js 的生命周期钩子分为 8 个部分，按照执行顺序分别为：创建阶段、挂载阶段、更新阶段和销毁阶段。
创建阶段
第一步是创建阶段，这是组件实例化的时候发生的。下面是 Vue.js 所有的创建生命周期钩子，按执行顺序排列：
- beforeCreate
- created
beforeCreate 生命周期在实例创建之后、插入到 DOM 之前被调用。此阶段也是访问不到 data、props、computed 和 methods 等 Vue 实例属性和方法的。
created 生命周期在实例创建后、实例化完成后立即被调用。此方法可以访问到 data、props 等 Vue 实例属性和方法，但此时原始的 DOM 节点还没有被渲染出来。
挂载阶段
接着是 Vue 实例的挂载阶段。在这个阶段，Vue 实例的 DOM 将被渲染，并添加到页面中。下面是 Vue.js 所有的挂载生命周期钩子，按执行顺序排列：
- beforeMount
- mounted
beforeMount 生命周期在挂载开始之前被调用。此时，Vue 实例的 template 被处理成了 render 函数，但还未执行，DOM 也未渲染出来。
mounted 生命周期在实例被挂载到 DOM 后调用。此时 Vue 实例已经渲染出来，并放到了 DOM 中。
更新阶段
在更新阶段，当 Vue 实例的 data 或 props 发生变化时，或调用了 $forceUpdate() 方法，Vue 实例被重新渲染。下面是 Vue.js 所有的更新生命周期钩子，按执行顺序排列：
- beforeUpdate
- updated
beforeUpdate 生命周期在数据更新之前被调用。此时，Vue 实例中的 data 已经更新，但 DOM 没有重新渲染。
updated 生命周期在数据更新后被调用。此时 Vue 实例中的 data 已经更新，并且 DOM 已经重新渲染。
销毁阶段
最后是销毁阶段，此阶段会在 Vue 实例被销毁前被调用，并且会清除无用的监听器和计时器。下面是 Vue.js 所有的销毁生命周期钩子，按执行顺序排列：
- beforeDestroy
- destroyed
beforeDestroy 生命周期在实例销毁之前被调用。此时，Vue 实例还未销毁，可以在此钩子中执行必要的清理工作。
destroyed 生命周期在实例被销毁之后调用。此时，Vue 实例已经被销毁，并且不能再被访问。
Vue.js 的销毁钩子
Vue.js 的销毁钩子是指在组件被销毁时执行的函数，用于清除未释放的资源，如计时器。下面是两个最常用的 Vue.js 销毁钩子：
beforeDestroy
beforeDestroy 钩子在 Vue 实例销毁之前调用。此时 Vue 实例仍然处于活动状态，并且可以访问实例中的属性。
------ ------- -
--------------- -
-- ---------------
--------------------------
--
--destroyed
destroyed 钩子在 Vue 实例销毁后调用。此时 Vue 实例已经被销毁，不能再访问 Vue 实例中的属性。
------ ------- -
----------- -
-- ---- --- ------
--
--结论
Vue.js 的完整生命周期和销毁钩子是一个重要的概念，通过深入掌握这些概念，可以更好地开发 Vue.js 应用程序。开发人员应该在编写 Vue.js 组件时，了解如何使用生命周期钩子和销毁钩子，并在适当的时候释放资源，以避免导致内存泄漏。希望这篇文章能帮助你更好地了解 Vue.js 生命周期和销毁钩子。
示例代码
下面是一个示例 Vue.js 组件的完整代码，其中包括生命周期钩子和销毁钩子。这个组件在挂载时启动定时器，在销毁时清除定时器。
----------
-----
----- ------- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- --------
--
--
--------- -
-----------------------
--
--------- -
-----------------------
---------- - -------------- -- -
------------ - --- ------------------------
-- ------
--
--------- -
-----------------------
--
--------------- -
-----------------------------
--------------------------
--
----------- -
-------------------------
--
--
---------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67130f61ad1e889fe20a287b