Vue3生命周期钩子函数详解

Vue3的生命周期函数是在组件渲染过程中执行的一系列函数，它们允许我们在组件的不同阶段执行自定义的代码逻辑。 Vue3中的生命周期函数与Vue2中的生命周期函数在名称和行为方面都有所改变。

生命周期钩子函数一览

总的来说，Vue3中有8个生命周期函数，这些生命周期函数按照它们执行的时间点被分为三类：

• 创建期（creation）：
• setup()
• 更新期（update）：
• onBeforeUpdate()
• onUpdated()
• onRenderTracked()
• onRenderTriggered()
• 卸载期（unmount）：
• onBeforeUnmount()
• onUnmounted()
• onDeactivated()（新添加）

生命周期钩子函数的执行顺序

Vue3中的生命周期函数的执行顺序如下：

1. setup()
2. 对组件中响应式数据的更改会触发以下三个生命周期钩子函数：
3. onBeforeUpdate()
4. 组件重新渲染
5. onUpdated()
6. 在组件卸载之前，组件中所有的effect都会执行一次
7. onBeforeUnmount()
8. 卸载组件中的所有effect和watch
9. onUnmounted()

生命周期钩子函数的使用

setup()

setup()函数是Vue3中的新生命周期函数，它的目的是替代Vue2中的beforeCreate和created生命周期函数，用来完成组件实例的创建和初始化。setup()函数在组件实例被创建之前被调用，它返回一个对象，对象中的属性和方法会被注入到组件实例中，我们也可以在setup()函数中创建和设置组件中的响应式数据。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
</script>

在上面的示例中，我们通过ref()创建了一个名为count的响应式数据属性和一个increment()方法，然后通过return语句将这两个属性/方法注入到组件中。

值得注意的是，setup()函数的返回值必须是一个普通对象或函数，不能是一个Promise或者没有返回值。

onBeforeUpdate()

onBeforeUpdate()生命周期函数在组件进行重新渲染之前被调用，此时我们可以访问到组件更新之前的状态，通过这个钩子函数我们可以检查、调整或取消当前的更新。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
      message: 'Message from before update',
    };
  },

  onBeforeUpdate() {
    console.log(this.message);
  },
};
</script>

在上面的示例中，我们在setup()函数中声明了一个名为message的数据属性，然后在onBeforeUpdate()函数中输出了message的值。当我们点击按钮触发组件重新渲染时，onBeforeUpdate()函数会在更新之前被调用，并且输出Message from before update。

onUpdated()

onUpdated()生命周期函数在组件进行重新渲染之后被调用，此时我们可以访问到组件更新之后的状态，通过这个钩子函数我们可以执行一些与更新后子组件相关的操作。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },

  onUpdated() {
    console.log(`Count updated to ${this.count}`);
  },
};
</script>

在上面的示例中，我们在onUpdated()函数中输出了count的值，当我们点击按钮触发组件重新渲染时，onUpdated()函数会在更新之后被调用，并且输出Count updated to后面跟着当前count的值。

示例

下面，我们来看一个更加具体的示例，该示例演示了onBeforeUnmount()和onUnmounted()生命周期函数的用法。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    // Effect用来演示：在组件卸载之前，组件中所有的`effect`都会执行一次
    const effect = () => console.log('effect');

    onBeforeUnmount(() => {
      console.log('Unregistering effect...');
      effect();
    });

    onUnmounted(() => {
      console.log('Component unmounted.');
    });

    return {
      count,
      increment,
      effect,
    };
  },
};
</script>

在上面的示例中，我们在setup()函数中定义了一个名为effect的函数，并在它之前使用了onBeforeUnmount()钩子函数，在该函数内部注销了effect。在onUnmounted()钩子函数中输出了组件卸载的消息。我们在组件内部使用effect函数来演示，在组件卸载之前，组件中所有的effect都会执行一次。

总结

Vue3中的生命周期函数在Vue2的基础上进行了一些改进，新添加了一个setup()函数，并为其他生命周期函数改变了名称和行为，以更好地适应Vue3的特性和优化。在使用生命周期函数时，我们需要注意不同生命周期函数的执行时间点和使用场景，合理地利用生命周期函数可以让我们更好地理解组件状态和行为。