Vue生命周期函数详解

Vue2.x

你不能使用箭头函数来定义一个生命周期方法！！因为this啥也找不到还报错！

beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前执行，此时组件实例还未创建，通常用于插件开发中执行一些初始化任务。

created

组件实例已经创建完成，并配置了数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。但是还没有挂载DOM，此阶段可用于异步数据获取。

beforeMount

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

mounted

组件实例被挂载后完成，DOM已创建，此阶段可用于访问数据和DOM元素，但不会保证所有子组件都一起被挂载。如果您希望整个视图都完成渲染可以在 mounted 内部使用 vm.$nextTick

beforeUpdate

数据更新前调用，可用于获取更新前的状态。可在这里 手动移除已经添加的事件监听器。

updated

此函数执行的时候。DOM已经更新。

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

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用，此时可以取消定时器和订阅事件。

除了beforeCreate、created外其他生命周期钩子函数在服务器端渲染期间均不被调用。

官网大图镇楼：

生命周期图示

Vue3

因为钩子函数们依赖内部的全局状态来定位当前的组件实例，所以他们只能在 setup() 期间注册及使用。

import { onMounted, onUpdated, onUnmounted } from 'vue'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  },
}

• 与2.x的对比（两个被替换了，其余的就是改了个名）
  • beforeCreate、created由setup()代替。
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

• 新增了2个方便调试 debug 的回调钩子（为了不误导请前往官方文档）

Vue2.x + Composition API 与 Vue3.x

• 在 Vue2.x + Composition API的环境下，进行两者钩子函数混用时：Vue2.x 的回调函数会相对先执行（例：mounted 先于 onMounted执行）

• 在 Vue3.x 环境下，为了兼容 Vue2.x 的语法，全部旧的生命周期函数获得保留（除了 beforeDestroy 和 destroyed），生命周期混合使用时：Vue3.x 的生命周期相对优先于 Vue2.x 的执行（例：onMounted 先于 mounted 执行）。

当生命周期混用时，主版本的钩子函数就会相对优先执行。为了产生不必要的麻烦就不要混用啦。