Vue 生命周期
vue2有9个生命周期钩子
vue3也有9个生命周期钩子
2.x和3.x钩子的对应关系:
beforeCreate
-> 使用 setup()
created
-> 使用 setup()
beforeMount
-> onBeforeMount
mounted
-> onMounted
beforeUpdate
-> onBeforeUpdate
updated
-> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed
-> onUnmounted
errorCaptured
-> onErrorCaptured
3.x新增钩子:
onRenderTracked
onRenderTriggered
两个钩子函数都接收一个 DebuggerEvent
,与 watchEffect
参数选项中的 onTrack
和 onTrigger
一样。
React 生命周期
react16版本之前有7个生命周期钩子
react16版本之后也有7个生命周期钩子
16版本之前
componentWillMount
(过时)componentDidMount
componentWillReceiveProps
(过时)shouldComponentUpdate
componentWillUpdate
(过时)componentDidUpdate
componentWillUnmount
16版本之后
getDeriveStateFromProps
(新增)componentDidMount
shouldComponentUpdate
getSnapshotBeforeUpdate
(新增)componentDidUpdate
componentWillUnmount
componentDidCatch
(新增)
React新增的生命周期函数说明
-
getDerivedStateFromProps (nextProps, prevState)
它配合 componentDidUpdate 周期函数,用来替代 componentWillReceiveProps。
将原本 componentWillReceiveProps 功能进行划分 —— 更新 state 和 操作/调用 props,很大程度避免了职责不清而导致过多的渲染, 从而影响应该性能。
-
getSnapshotBeforeUpdate (prevProps, prevState)
用来替代componentWillUpdate;
在组件更新之前获取一个 snapshot —— 可以将计算得的值或从 DOM 得到的信息传递到 componentDidUpdate(prevProps, prevState, snapshot) 周期函数的第三个参数,常常用于 scroll 位置的定位。
-
componentDidCatch(error, info)
让开发者可以自主处理错误信息,诸如展示,上报错误等
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)