Vue 的生命周期方法

May 21, 2021

961 views

1244 words

>如需了解更为详细的Vue知识，参见[此链接][1]

**beforeCreate** 
   在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问
**created** 
   实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有$el,如果非要想与 Dom 进行交互，可以通过 vm.$nextTick 来访问 Dom
**beforeMount** 
   在挂载开始之前被调用：相关的 render 函数首次被调用
**mounted** 
   在挂载完成后发生，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom 节点
**beforeUpdate** 
   数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁（patch）之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程
**updated** 
   发生在更新完成之后，当前阶段组件 Dom 已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新，该钩子在服务器端渲染期间不被调用
**beforeDestroy** 
   实例销毁之前调用。在这一步，实例仍然完全可用。我们可以在这时进行善后收尾工作，比如清除计时器
**destroyed** 
   Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用
**activated** 
   keep-alive 专属，组件被激活时调用
**deactivated** 
   keep-alive 专属，组件被销毁时调用

### 场景
异步请求可以在钩子函数 created、beforeMount、mounted 中进行异步请求，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。
如果异步请求不需要依赖 Dom 推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求
能更快获取到服务端数据，减少页面  loading 时间。

新增vue 3中使用的生命周期

setup 
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onErrorCaptured

[1]: https://www.yuque.com/xieguang/gma7i0/efbrku

Last modification：August 1, 2021

欢迎留下您的脚印

Vue 的生命周期方法

Master • 2021 年 05 月 21 日