vue3中的生命周期函数有哪些
时间: 2023-07-19 11:53:51 浏览: 107
vue3.0生命周期的示例代码
Vue 3 中的生命周期函数与 Vue 2 类似,但有些名称和用法有所改变。下面是 Vue 3 中常用的生命周期函数:
- `beforeCreate`:在实例初始化之后、数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- `created`:在实例创建完成后立即被调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
- `beforeMount`:在挂载开始之前被调用。相关的 render 函数首次被调用。
- `mounted`:实例挂载完成后被调用,此时 DOM 已经渲染完成。如需在挂载后进行一些操作,可以在这个钩子函数中执行。
- `beforeUpdate`:在数据更新之前被调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子函数中对更新之前的状态进行更改。
- `updated`:在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时,组件 DOM 已经更新,可以执行依赖于 DOM 的操作。
- `beforeUnmount`:在实例销毁之前调用。在这一步,实例仍然完全可用。
- `unmounted`:在实例销毁之后调用。调用后,所有的指令都被解绑,所有的事件监听器都被移除,所有的子实例也都被销毁。
除了上述生命周期函数,Vue 3 还有一些较少使用的生命周期函数,如 `activated` 和 `deactivated`(对应 `keep-alive` 组件的激活和停用时调用),以及 `errorCaptured`(捕获子组件抛出的错误)。
阅读全文