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

相关推荐
天若有情6735 小时前
程序员原创|借鉴JS事件冒泡,根治电脑文件混乱的“冒泡整理法”
开发语言·javascript·windows·ecmascript·电脑·办公·日常
FYKJ_20106 小时前
springboot校园兼职平台--附源码02041
java·javascript·spring boot·python·eclipse·django·php
用户66885998476611 小时前
Vue 3.0安装与使用
vue.js
空中海11 小时前
01 React Native 基础、核心组件与布局体系
javascript·react native·react.js
空中海12 小时前
05 React架构设计、项目实践与专家清单
前端·react.js·前端框架
前端之虎陈随易14 小时前
2年没用Nodejs了,Bun很香
linux·前端·javascript·vue.js·typescript
空中海14 小时前
04 工程化、质量体系与 React 生态
前端·ubuntu·react.js
空中海14 小时前
03 性能、动画与 React Native 新架构
react native·react.js·架构
好运的阿财15 小时前
OpenClaw工具拆解之host_workspace_write+host_workspace_edit
前端·javascript·人工智能·机器学习·ai编程·openclaw·openclaw工具
XiYang-DING15 小时前
JavaScript
开发语言·javascript·ecmascript