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：监听出现异常；

小程序页面生命周期

  • onload()：监听页面加载。一个页面只会调一次，可以获取当前页面路径中的参数；
  • onShow()：监听页面显示 / 切入前台；
  • onReady()：监听页面初次渲染完成。一个页面只调一次，页面可以和视图层进行交互；
  • onHide()：监听页面隐藏 / 切入后台。 顶部或底部 tab 切到其他页面；
  • onUnload() 监听页面卸载。如 redirectTo 或 navigateBack 到其他页面时；

小程序组件生命周期

  • created： 监听组件实例被创建；(用于给组件的 this 添加自定义的属性)
  • attached：监听组件实例初始化完毕 / 进入页面节点树；(发请求获取初始数据)
  • ready：监听组件在视图层布局完成；(可操作页面)
  • moved：监听组件实例被移动到节点树另个位置；
  • detached：监听组件实例从页面节点树被移除；(清除定时器)
  • error：监听组件方法抛出错误；

小程序组件所在页面生命周期

  • show：组件所在页面被展示
  • hide：组件所在页面被隐藏
  • resize：组件所在页面尺寸改变时

react 生命周期函数

  • getDrivedStateFromprops：state的值在任何时候都取决于props时；
  • render：必须调用的方法，负责页面的渲染，页面初始加载就会先调用render一次；
  • constructor：构造函数，如果没有数据初始化就不用单独调用；
  • componentDidMount：组件挂载完毕（插入到DOM）后，会被立即调用；
  • componentDidUpdate：更新完成后被立即调用；
  • componentWillUnmount：会在组件销毁之前被调用，(组件清理工作，清除计时器、网络请求)；
  • getSnapshotBeforeUpdate；
  • shouldComponentUpdate：常用于性能优化，防止render进行多次渲染，消耗性能；