目录
Vue2.0 组件生命周期
-
beforeCreate:创建前,此时data和methods中的数据都还没有初始化;
-
created在:实例创建完成后被立即调用,data中的数据和方法,未挂载可以访问;
-
beforeMount:挂载开始之前:可以发起服务端请求,请求数据;
-
mounted: 挂载到实例上去之后调用,此时可以操作DOM;(注意:并不能确定子组件被全部挂载,如果需要子组件完全挂载之后执行操作可以使用$nextTick)
-
beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前;
-
updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁;
-
beforeDestroy:实例销毁之前调用;
-
destroyed:Vue 实例销毁后调用。Vue 实例解绑,事件监听移除,子实例被销毁;
vue3.0组件生命周期
-
setup 创建实例前;
-
onBeforeMount 挂载DOM前;
-
onMounted 挂载DOM后;
-
onBeforeUpdate 更新组件前;
-
onUpdated 更新组件后;
-
onBeforeUnmount 卸载销毁前;
-
onUnmounted 卸载销毁后;
小程序应用生命周期
-
onLaunch:监听小程序启动,渲染完成 (全局只触发一次);
-
onShow:监听小程序启动 或 从后台进入前台 (可以触发多次);
-
onHide:监听小程序隐藏 或 从后台进入前台时 (可以触发多次);
-
onError:监听出现异常;
执行顺序: onLaunch--> onShow --> onHide
小程序页面生命周期
Pages生命周期主要是指各个文件对应的js中的生命周
-
onload():监听页面加载。可以获取当前页面路径中的参数;(一个页面只会调一次)
-
onShow():监听页面显示 / 切入前台;(执行多次)
-
onReady():监听页面初次渲染完成。页面可以和视图层进行交互;(一个页面只会调一次)
-
onHide():监听页面隐藏 / 切入后台。 顶部或底部 tab 切到其他页面;
-
onUnload() 监听页面卸载。如 redirectTo 或 navigateBack 到其他页面时;
注意点:当切换页面需要多次渲染数据改变状态,建议在onShow中使用,当只需初始化一次的时候,可在onLoad或者onReady中使用。当需要清除定时器时,可在onUnload中使用
执行顺序:onLoad --> onShow --> onReady --> onHide
小程序组件生命周期
-
created: 监听组件实例被创建;(用于给组件的 this 添加自定义的属性)
-
attached:监听组件实例初始化完毕 / 进入页面节点树;(发请求获取初始数据)
-
ready:监听组件在视图层布局完成;(可操作页面)
-
moved:监听组件实例被移动到节点树另个位置;
-
detached:监听组件实例从页面节点树被移除;(清除定时器)
-
error:监听组件方法抛出错误;
小程序组件所在页面生命周期
- show:组件所在页面被展示
- hide:组件所在页面被隐藏
- resize:组件所在页面尺寸改变时
react 生命周期函数
- getDrivedStateFromprops:state的值在任何时候都取决于props时;
- render:必须调用的方法,负责页面的渲染,页面初始加载就会先调用render一次;
- constructor:构造函数,如果没有数据初始化就不用单独调用;
- componentDidMount:组件挂载完毕(插入到DOM)后,会被立即调用;
- componentDidUpdate:更新完成后被立即调用;
- componentWillUnmount:会在组件销毁之前被调用,(组件清理工作,清除计时器、网络请求);
- getSnapshotBeforeUpdate;
- shouldComponentUpdate:常用于性能优化,防止render进行多次渲染,消耗性能;