【Vue3 生命周期函数】

什么是Vue 3的生命周期函数？

Vue 3的生命周期函数是一组特定的函数，它们在组件不同的生命周期阶段被自动调用。这些生命周期阶段包括组件的创建、挂载、更新和销毁等，每个阶段都有相应的生命周期函数。通过这些生命周期函数，可以实现一系列任务，例如初始化数据、访问DOM元素、响应数据变化等。

生命周期函数的顺序

Vue 3的生命周期函数按顺序分为三个主要阶段：

1. 创建阶段

• beforeCreate: 在实例初始化之后，数据观测和事件配置之前被调用。
• created: 在实例创建完成后立即被调用。在这一步，实例已经完成了数据观测和初始化，但尚未挂载到DOM上。

2. 更新阶段

• beforeMount: 在挂载开始之前被调用。在这一步，Vue实例的模板编译已经完成，但尚未将模板渲染成HTML。
• mounted: 在挂载完成后被调用。这时，Vue实例已经挂载到DOM上，可以访问DOM元素。

3. 销毁阶段

• beforeUnmount: 在卸载之前被调用。在这一步，组件仍然完全可用。
• unmounted: 在卸载后被调用。在这一步，组件已经被销毁，无法再访问其属性和方法。

更新阶段（仅涉及在数据更新时）

• beforeUpdate: 在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。
• updated: 在数据更新后被调用，发生在虚拟DOM重新渲染和打补丁之后。

生命周期函数的用途

生命周期函数在不同的阶段执行不同的任务，以下是一些常见的用途示例：

• created: 常用于发起网络请求、初始化组件的数据或配置事件处理程序。
• mounted: 通常用于访问DOM元素、初始化第三方库、或者开启一些定时器。
• beforeUpdate 和 updated: 可用于监听数据变化、执行一些与数据更新相关的操作，如动画效果的处理。
• beforeUnmount 和 unmounted: 用于清理定时器、取消订阅、销毁第三方库的实例等。

计数器应用

创建一个计数器组件，并在不同的生命周期阶段输出日志以展示生命周期函数的触发顺序。

定义一个Vue组件：

const app = Vue.createApp({
  data() {
    return {
      count: 0
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

在模板中使用生命周期函数：

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

将Vue实例挂载到DOM中：

app.mount('#app');

总结

Vue 3的生命周期函数允许在不同的阶段执行自定义代码，以控制组件的行为和状态。