文章目录
前言
本文主要对Vue生命周期与React生命周期进行简单介绍。
一、Vue生命周期
1.初始化
| 钩子名称 | 触发时机 | 说明 |
|---|---|---|
| beforeCreate | 实例初始化之后调用 | 此时实例刚刚在内存中被创建出来 |
| created | 实例创建完成后立即调用 | 此时实例在内存中已经创建完毕，data和methods已初始化，可以访问data中的数据，调用methods中的方法 |
2.挂载
| 钩子名称 | 触发时机 | 说明 |
|---|---|---|
| beforeMount | 在挂载开始之前被调用 | 此时Vue实例还没有挂载到页面 |
| mounted | 挂载到实例之后调用 | 此时Vue实例已经挂载到DOM，可以在这个阶段操作DOM，执行与DOM相关的操作逻辑 |
3.更新
| 钩子名称 | 触发时机 | 说明 |
|---|---|---|
| beforeUpdate | 数据更新时调用 | 此时虚拟DOM还未重新渲染 |
| updated | 数据更改后调用 | 此时虚拟DOM已渲染完成 |
4.销毁
| 钩子名称 | 触发时机 | 说明 |
|---|---|---|
| beforeUnmount | 卸载实例之前调用 | 在这一步，实例仍完全可用，可以在实例卸载前进行一些清理操作，例如取消事件监听 |
| unmounted | 实例卸载之后调用 | 在实例卸载后，进行一些清理操作，例如销毁定时器 |
二、React组件的生命周期
React生命周期参考菜鸟教程，链接如下：
React 组件生命周期
1.挂载 Mounting（已插入真实DOM）
当组件实例被创建并插入DOM中时，其生命周期调用顺序如下：
constructor()getDerivedStateFromProps()render()componentDidMount()
2.更新 Updating（正在被重新渲染）
当组件的state或props发生变化时，组件就会更新。组件更新的生命周期调用顺序如下：
getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
3.卸载 Unmounting（已移出真实DOM）
当组件从DOM中移除时，调用如下方法：
componentWillUnmount()：在组件卸载及销毁之前直接调用。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
