Vue 2 生命周期与 Vue 3 生命周期：介绍与差别对比

Vue 2 和 Vue 3 之间的主要差异之一是它们的生命周期钩子。Vue 2 的生命周期钩子基于钩子函数的命名，而 Vue 3 使用 Composition API，其中包括一组新的生命周期钩子。

Vue 2 生命周期:

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed
• errorCaptured

Vue 3 生命周期 (使用 Composition API):

• setup()
• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted
• onErrorCaptured
• onRenderTracked
• onRenderTriggered

Vue 3 还引入了 Options API 和 Composition API 的混合使用。

Vue 3 示例代码:

<template>
  <div>{{ message }}</div>
</template>
 
<script>
import { ref, onMounted, onUnmounted } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello, Vue 3!');
 
    onMounted(() => {
      console.log('组件已挂载');
    });
 
    onUnmounted(() => {
      console.log('组件已卸载');
    });
 
    // 返回值将会被定义在组件的作用域内
    return { message };
  }
};
</script>

Vue 2 和 Vue 3 生命周期的主要区别在于 Vue 3 引入了 Composition API，它提供了更多的灵活性和可组合性。开发者可以根据需要选择使用 Options API 或 Composition API，甚至可以在同一个组件中混合使用两者。