Vue 2 和 Vue 3 中的生命周期钩子

Vue 2 和 Vue 3 中的生命周期钩子基本相同，但在 Vue 3 中有一些生命周期钩子被重命名或者合并了。以下是 Vue 2 和 Vue 3 中常用的生命周期钩子以及它们的写法区别：

Vue 2 生命周期钩子

1. beforeCreate：实例刚被创建，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2. created：实例已经创建完成，此时已经完成了数据观测和初始化，但尚未挂载到 DOM 上。

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

4. mounted：实例已经挂载到 DOM 上后调用，此时组件已经在 DOM 中，可以进行 DOM 操作。

5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。

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

8. destroyed：实例销毁之后调用。在这一步，所有的事件监听器和子实例已经被移除。

Vue 3 生命周期钩子

1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2. created：实例已经创建完成，此时已经完成了数据观测和初始化，但尚未挂载到 DOM 上。

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

4. onMounted：在挂载完成后调用，对应于 Vue 2 中的 mounted 钩子。

5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

6. onUpdated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。

7. beforeUnmount：在卸载之前调用。

8. onUnmounted：在卸载之后调用，对应于 Vue 2 中的 destroyed 钩子。

在 Vue 3 中，生命周期钩子的命名更加一致和语义化，同时也提供了更多的生命周期钩子来更精细地控制组件的生命周期。下面是一个 Vue 3 中的生命周期钩子的例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  },
  beforeCreate() {
    console.log('Before create hook');
  },
  created() {
    console.log('Created hook');
  },
  beforeMount() {
    console.log('Before mount hook');
  },
  onMounted() {
    console.log('Mounted hook');
  },
  beforeUpdate() {
    console.log('Before update hook');
  },
  onUpdated() {
    console.log('Updated hook');
  },
  beforeUnmount() {
    console.log('Before unmount hook');
  },
  onUnmounted() {
    console.log('Unmounted hook');
  }
};
</script>

这个例子展示了 Vue 3 中的生命周期钩子的使用方法，以及与 Vue 2 中生命周期钩子的对应关系。