vue3生命周期

最新推荐文章于 2025-03-17 18:28:00 发布

徐_三岁

最新推荐文章于 2025-03-17 18:28:00 发布

阅读量490

点赞数

分类专栏： vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_49078296/article/details/128282674

版权

29 篇文章

订阅专栏

vue3的组合式api中，setup中的函数执行相当于在选项api中的beforeCreate和created中执行

import { onMounted } from 'vue'

选项式api和组合式api的映射：

beforeCreate-> setup，
created-> setup，
setup 开始创建组件之前调用，创建的是 data 和 method
beforeMount -> onBeforeMount，在挂载前被调用
mounted -> onMounted，挂载完成后调用
beforeUpdate -> onBeforeUpdate，数据更新时调用，发生在虚拟 DOM 打补丁之前。此时内存中的数据已经被修改，但还没有更新到页面上
updated -> onUpdated，数据更新后调用，此时内存数据已经修改，页面数据也已经更新
beforeUnmount -> onBeforeUnmount，组件卸载前调用
unmounted -> onUnmounted，卸载组件实例后调用。
errorCaptured -> onErrorCaptured，每当事件处理程序或生命周期钩子抛出错误时调用
renderTracked -> onRenderTracked，状态跟踪，vue3新引入的钩子函数，只有在开发环境有用，用于跟踪所有响应式变量和方法，一旦页面有update，就会跟踪他们并返回一个event对象
renderTriggered -> onRenderTriggered，状态触发，同样是vue3新引入的钩子函数，只有在开发环境有效，与onRenderTracked的效果类似，但不会跟踪所有的响应式变量方法，只会定点追踪发生改变的数据，同样返回一个event对象
activated -> onActivated，与keep-alive一起使用，当keep-alive包裹的组件激活时调用
deactivated -> onDeactivated，与keep-alive一起使用，当keep-alive包裹的组件停用时调用