Vue2/Vue3生命周期对比

Vue2的生命周期钩子

1. beforeCreate

• 在实例初始化之后，数据观测（data）和事件配置之前调用。
• 此时无法访问 data、methods 等。

2. created

• 在实例创建完成后调用。
• 此时可以访问 data、methods，但 DOM 还未生成。

3. beforeMount

• 在挂载开始之前调用。

• 此时模板已经编译完成，但尚未将 DOM 渲染到页面中。

4. mounted

• 在实例挂载到 DOM 后调用。

• 此时可以访问 DOM 元素。

5. beforeUpdate

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

• 可以在更新前访问现有的 DOM。

6. updated

• 在数据更新后调用，虚拟 DOM 重新渲染和打补丁完成。

• 此时可以操作更新后的 DOM。

7. beforeDestroy

• 在实例销毁之前调用。

• 此时实例仍然完全可用。

8. destroyed

• 在实例销毁后调用。

• 此时所有的事件监听器和子实例都被移除。

Vue3的生命周期钩子

1. 创建阶段
   beforeCreate 和 created：这两个钩子在 Vue 2 中存在，但在 Vue 3 中已经被移除。在 Vue 3 中，你可以使用 setup() 函数来替代这些钩子的功能，因为它在组件实例开始创建之前就已调用。

2. 挂载阶段
   beforeMount：这个钩子在 Vue 2 中是 beforeMount，但在 Vue 3 中，你应该使用 onBeforeMount。
   mounted：这个钩子在 Vue 2 中是 mounted，在 Vue 3 中，你应该使用 onMounted。

3. 更新阶段
   beforeUpdate：这个钩子在 Vue 2 中是 beforeUpdate，在 Vue 3 中，你应该使用 onBeforeUpdate。
   updated：这个钩子在 Vue 2 中是 updated，在 Vue 3 中，你应该使用 onUpdated。

4. 卸载阶段
   beforeDestroy 和 destroyed：这两个钩子在 Vue 2 中用于组件销毁前后的操作，分别对应 beforeUnmount 和 unmounted 在 Vue 3 中。
   beforeUnmount：对应于 Vue 2 的 beforeDestroy。
   unmounted：对应于 Vue 2 的 destroyed。