【Vue】探究 Vue 2 与 Vue 3 生命周期：变化与延续

// Vue 2 示例
new Vue({
  data: {
    counter: 0
  },
  created() {
    console.log('Vue 2: 组件已创建。');
  },
  mounted() {
    console.log('Vue 2: 组件已挂载。');
  }
});
 
// Vue 3 示例
const app = {
  setup() {
    // Vue 3 使用了 Composition API
    onMounted(() => {
      console.log('Vue 3: 组件已挂载。');
    });
    onBeforeMount(() => {
      console.log('Vue 3: 组件即将挂载。');
    });
    onUnmounted(() => {
      console.log('Vue 3: 组件已卸载。');
    });
  }
};
 
Vue.createApp(app).mount('#app');

这个代码示例展示了Vue 2和Vue 3中生命周期钩子的不同。Vue 2使用选项式API，其生命周期钩子如created和mounted被定义在组件对象的属性中。而Vue 3推荐使用组合式API，其生命周期钩子被导入并在setup()函数内部使用。此外，Vue 3 引入了“beforeMount”和“unmounted”等钩子，这些都是Vue 2中没有的。