Vue、react父子组件生命周期

Vue 的父子组件生命周期

以下分为三部分,加载渲染阶段------更新阶段------销毁阶段,我们来一一介绍:

1、加载渲染阶段

在加载渲染阶段,一定得等子组件挂载完毕后,父组件才能挂载完毕,所以父组件的 mounted 在最后。

beforeCreate(父组件)

created(父组件)

beforeMount(父组件)

beforeCreate(子组件)

created(子组件)

beforeMount(子组件)

Mounted(子组件)

Mounted(父组件)

2、更新阶段

当父子组件有数据传递时,才有这个更新阶段执行顺序的比较。

beforeUpdate(父组件)

beforeUpdate(子组件)

updated(子组件)

updated(父组件)

3、销毁阶段

beforeDestroy(父组件)

beforeDestroy(子组件)

destroyed(子组件)

destroyed(父组件)

React 的父子组件生命周期

1、挂载阶段:

父组件:constructor()

父组件:static getDerivedStateFromProps()

父组件:render()

子组件:constructor()

子组件:static getDerivedStateFromProps()

子组件:render()

子组件:componentDidMount()

父组件:componentDidMount()

2、更新阶段:

父组件:static getDerivedStateFromProps()

父组件:shouldComponentUpdate()

父组件:render()

子组件:static getDerivedStateFromProps()

子组件:shouldComponentUpdate()

子组件:render()

子组件:getSnapshotBeforeUpdate()

父组件:getSnapshotBeforeUpdate()

子组件:componentDidUpdate()

父组件:componentDidUpdate()

3、卸载阶段:

子组件:componentWillUnmount()

父组件:componentWillUnmount()

Vue3.0 的生命周期

所有生命周期钩子的this上下文都是绑定至实例的。

1、beforeCreate:在实例初始化之后、进行数据帧听和事件/侦听器的配置之前同步调用。

2、created:实例创建完成,主要包括数据帧听、计算属性、方法、事件/侦听器,(注意:由于挂在阶段还未开始,因此$el还不可用)。

3、beforeMount:挂在之前调用,render函数首次调用。

4、mounted:实例挂在完成后调用,(注意,mounted不会保证所有子组件都已挂载完成,可以使用$nextTick())。

5、beforeUpdate:数据发生改变之后,DOM被更新之前调用。

6、updated:在数据更改导致的虚拟DOM重新渲染和更新完毕之后调用(注意,updated不会保证所有子组件都已挂载完成,可以使用$nextTick())。

7、activated:被keep-alive缓存的组件激活时 调用。

8、deactivated:被keep-alive缓存的组件失活时调用。

9、beforeUnmount:在组件实例卸载之前调用。

10、unmounted:组件实例卸载之后调用(注意,实例所有指令都被解绑,所有侦听器都被移除,所有子组件实例都被卸载)。

11、errorCaptured:在捕获一个来自后代组件的错误时被调用(可以返回false可以阻止该错误继续向上传播。)。

12、renderTracked:跟踪虚拟DOM重新渲染时调用,可用来查看哪个操作跟踪了组件及该操作的目标对象和键。

13、renderTriggered:当虚拟DOM重新渲染被触发时调用,用来监听什么操作触发了重新渲染以及该操作的目标对象和键。

其实一般情况下用的最多的就是组件创建期间的一些声明周期钩子,比如:created、mounted、beforeUnmount(Vue 2.x版本中是beforeDestroy)等。

补充点:setup作为组合式API入口点,其调用时间是在创建组件实例时,在初始 prop 解析之后立即调用。在生命周期方面,它是在beforeCreate钩子之前调用的。

选项式API的生命周期选项与组合式API之间的映射

beforeCreate -> 使用 setup();

created -> 使用 setup();

beforeMount -> onBeforeMount;

mounted -> onMounted ;

beforeUpdate -> onBeforeUpdate;

updated -> onUpdated;

activated -> onActivated;

deactivated -> onDeactivated;

beforeUnmount -> onBeforeUnmount;

unmounted -> onUnmounted;

errorCaptured -> onErrorCaptured;

renderTracked -> onRenderTracked;

renderTriggered -> onRenderTriggered

相关推荐
OpsEye3 小时前
大模型账单对账难:不同厂商 Token 统计口径差异怎么处理
javascript·ai编程
全栈项目管理程序猿3 小时前
ArcGIS JS 基础教程(32):体元系列 - VoxelSlice 体元切片
前端·javascript
结局无敌5 小时前
React Native for OpenHarmony 实战:三方库 react-native-modal-dialog 的鸿蒙化适配指南
深度学习·算法·react native·react.js·harmonyos
流烟默5 小时前
SSE 实战:在 SpringBoot + Vue 项目中零依赖实现轻量级实时消息推送
vue.js·spring boot·后端·sse
Hilaku5 小时前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员
奇牙coding5 小时前
Codex CLI 升级后多文件编辑静默失效:config.yaml 枚举变更排查与修复指南
java·前端·javascript·ai
执子念的飞鱼5 小时前
纯前端预览 275 种文件格式是怎么做到的
前端·vue.js·react.js
不简说6 小时前
AI 帮你画模板、点一下就云打印:sv-print 这三个月都干了啥
前端·javascript·人工智能
大明二代6 小时前
从零构建 Mastra RAG MVP:DeepSeek、SiliconFlow 与 PostgreSQL/pgvector 实战
javascript·数据库·人工智能
结局无敌7 小时前
React Native for OpenHarmony 实战:三方库 react-native-paper 的鸿蒙化适配指南
javascript·人工智能·深度学习·react native·react.js·ecmascript·harmonyos