vue2和vue3生命周期钩子函数
时间: 2023-11-05 09:04:58 浏览: 46
Vue 2和Vue 3都有一些常用的生命周期钩子函数,但在Vue 3中有一些变化。以下是Vue 2和Vue 3中常用的生命周期钩子函数:
Vue 2中的生命周期钩子函数:
1. beforeCreate: 实例创建之前调用,此时数据观测(data observer)和事件配置(event/watcher)尚未初始化。
2. created: 实例创建完成后调用,此时已经完成了数据观测(data observer)和事件配置(event/watcher)。
3. beforeMount: 在挂载之前调用,在这个时候模板已经编译完成,但是还未挂载到页面中。
4. mounted: 在挂载完成后调用,此时组件已经被挂载到页面中,可以访问到DOM元素。
5. beforeUpdate: 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。
6. updated: 在数据更新之后调用,发生在虚拟DOM重新渲染和打补丁之后。
7. beforeDestroy: 在实例销毁之前调用,此时实例仍然完全可用。
8. destroyed: 在实例销毁之后调用,此时实例已经被销毁,所有的事件监听器和子实例都被删除。
Vue 3中的生命周期钩子函数:
1. beforeCreate: 与Vue 2相同,在实例创建之前调用。
2. created: 与Vue 2相同,在实例创建完成后调用。
3. beforeMount: 与Vue 2相同,在挂载之前调用。
4. mounted: 与Vue 2相同,在挂载完成后调用。
5. beforeUpdate: 与Vue 2相同,在数据更新之前调用。
6. updated: 与Vue 2相同,在数据更新之后调用。
7. beforeUnmount: 在组件卸载之前调用,此时组件仍然完全可用。
8. unmounted: 在组件卸载之后调用,此时组件已经被卸载,所有的事件监听器和子组件都被删除。