vue3选项式生命周期
时间: 2023-09-18 16:02:23 浏览: 39
Vue3 的选项式生命周期主要有 `beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeUnmount`、`unmounted` 等生命周期钩子函数。
1. `beforeCreate`:组件实例刚在内存中创建,还未完成初始化,此时无法访问到 `data`、`methods` 等选项。
2. `created`:组件实例已经完成了初始化,可以访问到 `data`、`methods` 等选项。但此时还未挂载到页面上。
3. `beforeMount`:组件挂载之前被调用,此时模板已经编译完成,但是还未挂载到页面上。
4. `mounted`:组件挂载到页面之后被调用,此时可以操作 DOM 等操作。
5. `beforeUpdate`:组件数据更新之前被调用,此时可以对更新前的状态进行操作。
6. `updated`:组件数据更新完成之后被调用,此时可以获取到更新后的 DOM。
7. `beforeUnmount`:在组件中卸载之前被调用,可以在这里进行一些清理操作。
8. `unmounted`:组件卸载之后被调用,此时组件销毁,无法再访问组件实例。
这些选项式生命周期钩子函数可以帮助我们在组件的不同阶段执行相应的逻辑操作,例如在 `created` 钩子中可以进行一些初始化数据的操作,而在 `mounted` 钩子中可以进行一些 DOM 操作。
Vue3 对比 Vue2 在生命周期方面做了一些优化和调整,例如将 `beforeCreate` 和 `created` 这两个钩子函数合并成了一个 `beforeMount` 钩子,将 `beforeDestroy` 和 `destroyed` 钩子函数合并成了一个 `beforeUnmount` 钩子。这样的改变使得代码更加易读和清晰,同时也提高了性能。