vue3的生命周期

1.setup取代beforeCreate和created

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


2.组合式api的生命周期需引入使用

除了beforeCreate和created外,其他生命周期的使用都需要提前引入(轻量化)


3.可使用的生命周期

除了beforeCreate和created被setup取代之外,选项式api和组合式api的映射如下:

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包裹的组件停用时调用

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容