Vue生命周期详解(个人的基本理解)

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

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

在这里插入图片描述

挂载(初始化相关属性)

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

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()

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

学海无涯!努力二字,共勉!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章