Vue 生命周期探究

在使用 vue 时,到底是因该从 created 获取数据呢,还是应该从 mounted 获取数据呢? updated 是在什么时候触发运行的? 这些问题的产生就在于对 vue 生命周期的不了解,本文就对 vue 的生命周期进行了解释说明。

vue 生命周期简介

以下为来自官方的示意图:

从图中可以看出,基础流程生命周期为:

钩子名称 说明
beforeCreate 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。 该钩子在服务器端渲染期间不被调用。
mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。该钩子在服务器端渲染期间不被调用。
beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。 该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。
update 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
beforeDestory 实例销毁之前调用。在这一步,实例仍然完全可用。 该钩子在服务器端渲染期间不被调用。
destoryed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

vue 生命周期说明

created

已经完成了 data 的初始化, 但是 $el 没有完成加载, 没有 dom 操作的异步请求可以放在这里进行操作。

mounted

已经完成了挂载操作,如果有对 dom 操作的异步请求可以放在这里进行操作。

beforeUpdate

检测到数据变更,但是 view 还没有对数据进行修改,此时也是数据修改的最后时机。

update

数据已经修改完毕, 并显示在 view 上。
推荐用 watcher方法而避免用该方法。 可能因为操作数据造成死循环。

关于何时进行数据请求

个人看法, 如果没有 dom 操作放到 created 里, 反之放到 mounted里。
如果放到 created 里并且有 dom 操作, 可以使用 Vue.nextTick, 在下次更新循环结束之后,才对 dom 进行操作。
created 阶段的ajax请求与 mounted 请求的区别:前者页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态。


咸鱼也要有梦想,万一实现了呢
0%