Vue生命周期概览 ｜小册免费学

在Vue 2.x 单一组件中，钩子的执行顺序是beforeCreate-> created -> mounted->... ->destroyed，但当父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数，这些父子组件的这些钩子是如何交融执行，且执行顺序又是怎样的呢?

Vue2.x 父子组件生命周期执行顺序

结论：

遵循先父后子

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
复制代码

更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

常用钩子简易版

父create->子created->子mounted->父mounted

Vue3生命周期钩子函数与 Vue2 大致相同，生命周期钩子函数，Vue 2.0 对应 Vue 3.0 的写法如下：

• beforeCreate -> setup。
• created -> setup。
• beforeMount -> onBeforeMount。
• mounted -> onMounted。
• beforeUpdate -> onBeforeUpdate。
• updated -> onUpdated。
• beforeDestroy -> onBeforeUnmount。
• destroyed -> onUnmounted。
• errorCaptured -> onErrorCaptured。

Vue3生命周期图示

总结

除了beforecate和created(它们被setup方法本身所取代)，我们可以在setup方法中访问的API生命周期钩子有9个选项:

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

• onMounted – 组件挂载时调用
• onBeforeUpdate – 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
• onUpdated – 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
• onBeforeUnmount – 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
• onUnmounted – 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
• onActivated – 被 keep-alive 缓存的组件激活时调用。
• onDeactivated – 被 keep-alive 缓存的组件停用时调用。
• onErrorCaptured – 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

Composition API 里没有 beforeCreate 和 created 对应的生命周期，统一改成 setup 函数。

Vue3 调试钩子

Vue3 为我们提供了两个可用于调试目的的钩子。

1. onRenderTracked
2. onRenderTriggered

这两个事件都带有一个debugger event，此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。

onRenderTracked

跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。

<div id="app">
  <button v-on:click="addToCart">Add to cart</button>
  <p>Cart({{ cart }})</p>
</div>
const app = Vue.createApp({
  data() {
    return {
      cart: 0
    }
  },
  renderTracked({ key, target, type }) {
    console.log({ key, target, type })
    /* 当组件第一次渲染时，这将被记录下来:
    {
      key: "cart",
      target: {
        cart: 0
      },
      type: "get"
    }
    */
  },
  methods: {
    addToCart() {
      this.cart += 1
    }
  }
})

app.mount('#app')

renderTracked

当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked，接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。

用法：

<div id="app">
  <button v-on:click="addToCart">Add to cart</button>
  <p>Cart({{ cart }})</p>
</div>
const app = Vue.createApp({
  data() {
    return {
      cart: 0
    }
  },
  renderTriggered({ key, target, type }) {
    console.log({ key, target, type })
  },
  methods: {
    addToCart() {
      this.cart += 1
      /* 这将导致renderTriggered调用
        {
          key: "cart",
          target: {
            cart: 1
          },
          type: "set"
        }
      */
    }
  }
})

app.mount('#app')

作者：chenuvi

邮箱： chenui@outlook.com

参考内容：

vue3 官网教程

Vue中父子组件生命周期执行顺序回顾

Vue 3 生命周期完整指南

Vue 3.0 企业级项目实战

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情