Vue系列之简述每个生命周期具体适合哪些场景

[yuanyuanbyte]

本系列的主题是 Vue，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

简述每个生命周期具体适合哪些场景

✦ beforeCreate：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

✦ created：数据 data 、方法 methods 、监听器 watch 和 计算属性 computed都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作，常用于异步数据获取 。

✦ beforeMount： 在挂载开始之前被调用：相关的 render 函数首次被调用。

✦ mounted：实例被挂载后调用，在当前阶段，真实的 dom 挂载完毕，可以访问到 dom 。 如果想要操作 dom ，最早可以在这个阶段进行。

注意 ❗ ❗ ❗ mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}

✦ beforeUpdate：在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它。

✦ updated：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

注意 ❗ ❗ ❗ ，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：

updated: function () {
  this.$nextTick(function () {
    //  仅在整个视图都被重新渲染之后才会运行的代码     
  })
}

✦ beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

✦ destroyed：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。