vue生命周期11个钩子函数

Vue生命周期钩子函数是指在Vue实例对象经历不同阶段时自动调用的一系列函数。Vue生命周期总共有11个钩子函数，按顺序分为三个阶段：创建阶段、运行阶段和销毁阶段。

1. 创建阶段：

- beforeCreate：在Vue实例初始化之后，数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。此时，data和props中的数据和方法还未初始化，无法访问。

- created：在Vue实例创建完成后立即被调用。此时，data和props中的数据和方法已经初始化，可以访问。

- beforeMount：在挂载开始之前被调用。在这个钩子函数中，Vue实例已经完成了初始的编译，但是还没有挂载到DOM上。

2. 运行阶段：

- mounted：在实例挂载之后，即DOM元素插入到页面中之后被调用。在这个钩子函数中，可以访问到DOM元素，可以进行DOM操作，可以与后端交互，并且可以调用实例的方法。

- beforeUpdate：在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。不能在此钩子函数中更改数据，否则可能导致无限循环更新。

- updated：在数据更新之后被调用，发生在虚拟DOM重新渲染和打补丁之后。可以进行DOM操作，但需要注意防止无限循环更新。

3. 销毁阶段：

- beforeDestroy：在实例销毁之前被调用。此时，实例仍然完全可用，可以访问到data、props和methods等属性和方法。

- destroyed：在实例销毁之后被调用。此时，实例中的所有属性和方法都已经被销毁，无法访问到。

除了上述的主要钩子函数之外，还有两个特殊的钩子函数：

- activated：在组件章节中有详细讲述，仅适用于keep-alive组件，当组件被激活时调用。

- deactivated：在组件章节中有详细讲述，仅适用于keep-alive组件，当组件被停用时调用。

Vue生命周期的执行顺序可以总结为：beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed。其中，activated和deactivated是在keep-alive组件中使用的，不会在常规组件中调用。

在开发过程中，利用这些钩子函数，可以根据不同的阶段，进行一些逻辑处理、数据初始化、调用方法、进行DOM操作等。尤其在mounted钩子函数中，经常用于异步调用数据、执行一些初始化操作等。

需要注意的是，尽管Vue实例的创建阶段、运行阶段和销毁阶段存在钩子函数，但不是所有钩子函数都一定会被调用，视实际情况而定。另外，在beforeUpdate和updated钩子函数中更新数据时，需要注意避免无限循环更新的问题。

总之，Vue的生命周期钩子函数是Vue实例在不同阶段被触发的一系列函数，通过这些钩子函数，可以方便地进行初始化操作、数据更新、DOM操作等。了解和熟悉这些钩子函数，对于深入理解Vue的工作原理和实现自定义功能十分重要。