Vue React 及微信小程序生命周期

vue生命周期

Vue 的生命周期总共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。

1、beforeCreate(创建前)

表示实例完全被创建出来之前,vue 实例的挂载元素$el和数据对象 data 都为 undefined,还未初始化。

2、created(创建后)

数据对象 data 已存在,可以调用 methods 中的方法,操作 data 中的数据,但 dom 未生成,$el 未存在 。

3、beforeMount(挂载前)

vue 实例的 $el 和 data 都已初始化,挂载之前为虚拟的 dom节点,模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中。data.message 未替换。

4、mounted(挂载后)

vue 实例挂载完成,data.message 成功渲染。内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,DOM 渲染在 mounted 中就已经完成了。

5、beforeUpdate(更新前)

当 data 变化时,会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。

6、updated(更新后)

当 data 变化时,会触发 updated 方法。页面和 data 数据已经保持同步了。

7、beforeDestory(销毁前)

组件销毁之前调用 ,在这一步,实例仍然完全可用。

8、destoryed(销毁后)

组件销毁之后调用,对 data 的改变不会再触发周期函数,vue 实例已解除事件监听和 dom绑定,但 dom 结构依然存在。

Ract生命周期

React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁

  • 初始化

1、getDefaultProps()

设置默认的props,也可以用dufaultProps设置组件的默认属性.

2、getInitialState()

在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。此时可以访问this.props

3、componentWillMount()

组件初始化时只调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state。

4、 render()

react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。

5、componentDidMount()

组件渲染之后调用,只调用一次。

  • 更新

6、componentWillReceiveProps(nextProps)

组件初始化时不调用,组件接受新的props时调用。

7、shouldComponentUpdate(nextProps, nextState)

react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候

8、componentWillUpdata(nextProps, nextState)

组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state

9、render()

组件渲染

10、componentDidUpdate()

组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。

  • 卸载

11、componentWillUnmount()

组件将要卸载时调用,一些事件监听和定时器需要在此时清除。

微信小程序生命周期包含了三个部分:

应用级别的生命周期(整个App的生命周期)

页面级别的生命周期(单个页面(page)的生命周期)

组件基本的生命周期(组件(component的生命周期)

在这里插入图片描述

应用级别的生命周期 - App的生命周期

必须在 app.js 中调用,必须调用且只能调用一次。里面包含了几个app的生命周期钩子:

  1. onLaunch: 小程序初始化完成时触发,全局只触发一次
    • 云开发的初始化 方便其他页面直接调用云开发的SDK
    • 发送请求获取用户的个人信息 方便其他页面使用
    • 获取本地存储数据 方便其他页面使用
      .
  2. onShow:小程序启动或切前台显示时触发。
    • 重新启动定时器 继续定时执行功能
    • 重新触发异步 获取新的数据
    • 重新启动播放器等
      .
  3. onHide:小程序从前台进入后台时触发(如 切换到其他的App)。
    • 当暂停定时器
    • 暂停视频音频的播放
      .
  4. onError:小程序发生脚本错误或 API 调用报错时触发。
    • 收集错误信息 发送到后台 进行错误日志的记录
    • 弹出窗口提示用户
      .
  5. onPageNotFound:小程序要打开的页面不存在时触发。
    • 监听报错,弹出窗口提示用户
    • 监听报错,重新跳转页面
      .
  6. onUnhandledRejection:小程序有未处理的 Promise 拒绝时触发。
    • 用在统一捕获处理 可以在该生命周期中处理错误情况 ,一般是由于异步代码出错导致的
      .
  7. onThemeChange:系统切换主题时触发。
    • 让小程序可以跟着主题的切换 也改变小程序的UI风格,使之体验更好!

页面级别的生命周期 - 页面(page)的生命周期

在每个页面注册函数Page()的参数中,有生命周期的方法:

  1. onLoad:页面加载时执行,只执行一次;
  2. onShow:页面展示时执行,执行多次;
  3. onReady:页面初次渲染时执行,只执行一次;
  4. onHide:页面从前台进入后台时执行;
  5. onUnload:页面卸载时执行;

注意点:

当切换页面需要多次渲染数据改变状态,建议在onShow中使用,当只需初始化一次的时候,可在onLoad或者onReady中使用。当需要清除定时器时,可在onUnload中使用

执行顺序:

onLoad --> onShow --> onReady --> onHide

切换页面时触发的生命周期:

当首次加载A页面,A触发的生命周期为:onLoad --> onShow --> onReady;
从A页面切换到B页面时,A页面触发onHide,B页面触发的生命周期顺序与上面一致;
当B页面返回到A页面时,触发onUnload,当不清缓存,再次进入A页面时,只触发onShow。

在这里插入图片描述

 组件(component)的生命周期

组件生命周期包含:

  • created(重要):组件实例刚刚被创建好时触发
    此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下,这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
  • attached(重要):在组件完全初始化完毕、进入页面节点树后被触发
    此时, this.data 已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。
  • ready:在组件在视图层布局完成后执行
  • moved:在组件实例被移动到节点树另一个位置时执行
  • detached(重要):在组件离开页面节点树后被触发
  • error:每当组件方法抛出错误时执行

定义生命周期方法:

生命周期方法可以直接定义在 Component 构造器的第一级参数中。
自小程序基础库版本 2.2.3 起,组件的的生命周期也可以在 lifetimes 字段内进行声明(这是推荐的方式,其优先级最高)。

Component({
    // 新方法 - 推荐
    lifetimes: {
        attached: function () {
            // 在组件实例进入页面节点树时执行
        },
        detached: function () {
            // 在组件实例被从页面节点树移除时执行
        },
    },
    
    // 以下是旧式的定义方式,可以保持对 <2.2.3 版本基础库的兼容 
    attached: function () { // 在组件实例进入页面节点树时执行 
    },
    detached: function () { // 在组件实例被从页面节点树移除时执行 
    },
    // ... 
})
 

整体周期

打开页面的情况

首先,前一个页面隐藏,在加载下一个页面之前,需要先初始化新页面的组件。页面首次渲染之后,会触发组件的ready,最后触发的是页面的onReady,如下图:

从PageA打开pageB时的生命周期顺序

在这里插入图片描述

离开页面的情况

离开当前页面时,首先触发当前页面的卸载onUnload,接着是组件离开节点树的detached。最后显示之前的页面,触发onShow。如下图:

从PageB返回到PageA的生命周期顺序

在这里插入图片描述

打开App的情况

App、Page与Component生命周期运行顺序,先从App加载然后再加载Page,在加载Page之前会先初始化该页面所用的所有组件,之后才触发页面的onLoad生命周期,如下图:

打开App时的生命周期顺序

在这里插入图片描述

切换到后台

切换到后台时,小程序和页面并没有卸载,只会触发隐藏。先触发页面的onHide,接着是App的onHide。如下图:

切换到后台时的生命周期顺序

在这里插入图片描述

切换到前台

切换到后台时,小程序会先触发onShow,之后才是页面的onShow。如下图:

切换到前台时的生命周期顺序

在这里插入图片描述

总结

1. 打开小程序:

(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onReady

2. 进入下一个页面:

(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady

3. 返回上一个页面:

(curr)onUnload --> (pre)onShow

4. 离开小程序:

(App)onHide

5. 再次进入:

小程序未销毁 --> (App)onShow(执行上面的顺序),小程序被销毁,(App)onLaunch重新开始执行.

 

 

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
VueReact小程序是三种热门的前端开发技术,它们在不同的场景下有着不同的应用和特点。 首先,Vue是一个渐进式JavaScript框架,它具有易上手、灵活和高效的特点。Vue使用基于组件的开发方式,将界面划分为多个独立的组件,每个组件都有自己的逻辑和模板。Vue支持声明式的模板语法,可以方便地编写简洁清晰的代码。此外,Vue还提供了响应式的数据绑定和虚拟DOM技术,使得页面渲染和数据更新的效率较高。Vue也有丰富的生态系统和文档,使得学习和使用变得更加容易。 而React是由Facebook开发的一个用于构建用户界面的JavaScript库,它着重于UI组件的构建和管理。React采用了组件化的思想,将界面划分为多个独立的组件,每个组件都有自己的状态和属性。React使用JSX语法,将HTML和JavaScript混写在一起,使得开发者可以直观地描述用户界面。React采用虚拟DOM技术,通过差异化更新来提高性能。React同时还可以通过React Native来开发移动应用,一次编码可同时适用于iOS和Android平台。 小程序是一种轻量级的应用类型,可在微信、支付宝等平台上运行。小程序有自己的生命周期、页面和组件,但相比于VueReact小程序的API和功能较为有限。小程序主要使用JavaScript进行开发,具有丰富的UI组件库和调用底层接口的能力,可以实现类似于原生应用的功能。小程序开发相对于VueReact来说,学习曲线较为平缓,适合用于构建简单的应用和小型的企业业务。 综上所述,VueReact小程序在不同的场景下具有不同的特点和应用。选择合适的技术要根据具体的需求和项目来决定。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小程序小马哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值