Vue生命周期详解（个人的基本理解）

旧城等待， 2023-06-24 08:15 9阅读 0赞

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

下图展示了实例的生命周期。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTMxODg0_size_16_color_FFFFFF_t_70]

## 挂载（初始化相关属性） ##

#### 1.beforeCreate ####

当new Vue 实例的时候，还没有根据配置对象来进行Vue实例的具体配置时触发，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

#### 2.created ####

当Vue实例创建完毕的时候触发,在实例创建完成后被立即调用。

在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。就是说在这个钩子里面，我们可以调用methods中的方法，改变data中的数据，还有获取computed中的计算属性等。

然后我个人的话喜欢在这份周期中发送ajax请求，但是这个要注意一个点，这个周期中是没有声明方法可以对实例化过程进行拦截的，如果必须有某些数据才能进入页面的话，不适合在这个周期发送请求。建议在组件路由钩子beforeRouteEnter中完成。

如何有这种需求的话可以去官网看下  
[https://router.vuejs.org/zh/guide/advanced/navigation-guards.html\#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB][https_router.vuejs.org_zh_guide_advanced_navigation-guards.html_E8_B7_AF_E7_94_B1_E7_8B_AC_E4_BA_AB_E7_9A_84_E5_AE_88_E5_8D_AB]

#### 3.beforeMount ####

在实例进行挂载的时候触发，实例与app挂载的时候。挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，但是此时还没有挂载html到页面上。

#### 4.mounted ####

将容器初始化完毕，将容器模板也准备完毕时候触发。挂载页面，将html渲染到页面中，此时可以执行一些请求操作，这个事件只会执行一次。

一般会在mounted声明周期时发送ajax获取需要的数据，不过我的话可能不一样。惭愧，之前用习惯了。

## 更新（元素或组件的变更操作） ##

#### 1.beforeUpdata ####

在更新data中的数据之前触发。我们可以在beforeUpdate生命周期中验证用户更新的最新的数据是否正确

#### 2.updated ####

在数据更新完毕时触发

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

## 销毁（销毁相关属性） ##

#### 1.beforeDestroy ####

在销毁Vue实例前触发，在此时我们可以去释放，清空变量保存的数据。在这一步，实例仍然完全可用。一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件。

#### 2.destroyed ####

在销毁Vue实例后触发，在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

补充：  
如何销毁Vue实例  
this.$destroy()

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTMxODg0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191221195656771.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTMxODg0,size_16,color_FFFFFF,t_70
[https_router.vuejs.org_zh_guide_advanced_navigation-guards.html_E8_B7_AF_E7_94_B1_E7_8B_AC_E4_BA_AB_E7_9A_84_E5_AE_88_E5_8D_AB]: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB