Vue3学习笔记(生命周期)

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。

一.注册生命周期钩子


Vue3在生命周期这一块做了一些改动,与Vue2的意思不经相同,但单词变了。分别是

1.创建组件后

setup()

2.组件挂载完成后

onMountent()  

3.组件更新后

onUpdata()

4.组件销毁后

onUnmountend()

beforeCreate  -> setup() 开始创建组件之前,创建的是data和method

created       -> setup()

beforeMount   -> onBeforeMount 组件挂载到节点上之前执行的函数。

mounted       -> onMounted 组件挂载完成后执行的函数

beforeUpdate  -> onBeforeUpdate 组件更新之前执行的函数。

updated       -> onUpdated 组件更新完成之后执行的函数。

beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed     -> onUnmounted 组件卸载之前执行的函数。

二.此外还增加了几个生命周期钩子

1.组件即将因为响应式状态变更而更新其 DOM 树之前调用。

onBeforeUpdate()

2.在捕获了后代组件传递的错误时调用。

onErrorCaptured()

3.当响应式依赖的变更触发了组件渲染时调用。

onRenderTriggered() 

4.若组件实例是  缓存树的一部分,当组件被插入到 DOM 中时调用。

onActivated()

5.若组件实例是  缓存树的一部分,当组件从 DOM 中被移除时调用。

onDeactivated()

你可能感兴趣的:(笔记,Vue3学习,vue.js,学习,javascript)