Vue2/Vue3生命周期对比
Vue2的生命周期钩子
- beforeCreate
- 在实例初始化之后，数据观测（data）和事件配置之前调用。
- 此时无法访问 data、methods 等。
- created
- 在实例创建完成后调用。
- 此时可以访问 data、methods，但 DOM 还未生成。
- beforeMount
-
在挂载开始之前调用。
-
此时模板已经编译完成，但尚未将 DOM 渲染到页面中。
- mounted
-
在实例挂载到 DOM 后调用。
-
此时可以访问 DOM 元素。
- beforeUpdate
-
在数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
-
可以在更新前访问现有的 DOM。
- updated
-
在数据更新后调用，虚拟 DOM 重新渲染和打补丁完成。
-
此时可以操作更新后的 DOM。
- beforeDestroy
-
在实例销毁之前调用。
-
此时实例仍然完全可用。
- destroyed
-
在实例销毁后调用。
-
此时所有的事件监听器和子实例都被移除。
Vue3的生命周期钩子
-
创建阶段
beforeCreate 和 created：这两个钩子在 Vue 2 中存在，但在 Vue 3 中已经被移除。在 Vue 3 中，你可以使用 setup() 函数来替代这些钩子的功能，因为它在组件实例开始创建之前就已调用。 -
挂载阶段
beforeMount：这个钩子在 Vue 2 中是 beforeMount，但在 Vue 3 中，你应该使用 onBeforeMount。
mounted：这个钩子在 Vue 2 中是 mounted，在 Vue 3 中，你应该使用 onMounted。 -
更新阶段
beforeUpdate：这个钩子在 Vue 2 中是 beforeUpdate，在 Vue 3 中，你应该使用 onBeforeUpdate。
updated：这个钩子在 Vue 2 中是 updated，在 Vue 3 中，你应该使用 onUpdated。 -
卸载阶段
beforeDestroy 和 destroyed：这两个钩子在 Vue 2 中用于组件销毁前后的操作，分别对应 beforeUnmount 和 unmounted 在 Vue 3 中。
beforeUnmount：对应于 Vue 2 的 beforeDestroy。
unmounted：对应于 Vue 2 的 destroyed。