• 小程序开发.uniapp.生命周期


    小程序开发.uniapp.生命周期

    【内容介绍】: uniapp中生命周期相关内容

    相关文章推荐:

    jcLee95 的个人博客
    邮箱 :291148484@163.com
    CSDN 主页https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
    本文地址https://blog.csdn.net/qq_28550263/article/details/125883991

    目 录

    1. 概述

    2. 应用生命周期

    3. 页面生命周期

    4. 组件生命周期


    1. 概述

    uniapp 生命周期是以 小程序生命周期 为基础实现的,分为 应用生命周期页面生命周期组件生命周期。 其中 组件生命周期 就是 vue生命周期

    u n i a p p 生命周期 { 应用生命周期; 页面生命周期; 组件生命周期。 = > 即 v u e 生命周期 uniapp 生命周期

    {=>vue" role="presentation" style="position: relative;">{=>vue
    uniapp生命周期 应用生命周期;页面生命周期;组件生命周期。=>vue生命周期

    2. 应用生命周期

    函数描述说明
    onLaunch当 uniapp 初始化完成时发生调用全局只会触发一次
    onShow当 uniapp 启动或从后台进入前台时发生调用即用于监听用户进入小程序
    onHide当 uniapp从前台进入后台时发生调用即用于监听用户离开小程序
    onError当 uniapp 报错时被触发-
    onUniNViewMessage对 nvue 页面发生的数据进行监听-
    onUnhandledRejection对未处理的 Promise 拒绝事件进行监听-
    onPageNotFound页面不存在监听函数-
    onThemeChange监听系统主题的变化-

    3. 页面生命周期

    函数描述说明使用平台
    onLoad监听页面加载,其参数为上一个页面传递的数据,参数类型为 object主要是用于页面传参。
    onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面返回当前页面。
    onReady监听页面初次渲染完成。如果页面渲染速度快,会在页面进入动画前触发。
    onHide监听页面隐藏。-
    onUnload监听页面卸载。-
    onResize监听窗口尺寸的变化。-微信小程序、App
    onPullDownRefresh监听用户下拉动作。-
    onReachBottom监听页面上拉触底事件。多用于上拉加载更多数据。
    onTabItemTab点击 TabBar 时触发,参数类型为 object-微信小程序、百度小程序、H5、App自定义组件
    onShareAppMessage用户点击右上角分析时触发可以用于在分享时设置分析标题、路径等
    onShareTimeline用户点击右上角转发到朋友圈时触发-微信小程序v2.8.1+
    onAddToFavorites用户点击右上角收藏时触发-微信小程序v2.8.1+
    onPageScroll监听页面滚动,参数为 object类型-微信小程序、支付宝小程序、字节小程序、百度小程序
    onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为object类型-H5、App。 1.6.0
    onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件-H5、App 。1.6.0
    onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的 “搜索”按钮时触发H5、App 。
    onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件-H5、App 。1.6.0
    onBackPress监听用户点击右上角收藏-微信小程序v2.8.1+

    4. 组件生命周期

    uniapp 的组件生命周期Vue 标准组件生命周期相同。在 当前版本的 uniapp 中,你既可以选择使用 vue2 进行开发,也可以使用 vue3 进行开发。有关 vue2 和 vue3 生命周期的详细讲解和比较说明,请参考博文《VUE实例及其生命周期解析(vue2 与 vue3 比较)》

    4.1 在 uniapp 中建立 vue2 和 vue3项目的方式

    打开Hbuilder软件,依次点击文件=》新建=》项目
    打开uniapp新建项目

    可以看到弹出如图所示对话框:
    在这里插入图片描述
    你可以通过选择 Vue版本选择 中的选项来指定初始化一个 Vue2 或者 Vue3项目。其中选项 2 表示 vue2,选项 3 表示 vue3.

    4.2 Vue 2 生命周期介绍

    在Vue2中,这些时间关键点分别为 CreateMountUpdateDestroy。这里要指出的是,不论是创建、挂载,还是更新、销毁,都是需要时间的,也就是他们都是一个时间段。由于这些过程都是Vue框架为我们完成的,也不需要我们进行处理,因此我们完全可以将这几个过程认作时间点。具体而言,这四个点的功能和特点如下:

    • Create: Vue实例创建
    • Mount: Vue实例挂载
    • Update: Vue实例数据更新
    • Destroy: Vue实例销毁

    还有一些特殊的生命周期钩子,说他们特殊是因为他们用于特定的场景。如activateddeactivatederrorCaptured。这一部分将在 后续 讲述。

    在这里插入图片描述

    Vue2生命周期函数描述
    beforeCreate在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
    created在实例创建完成后被立即同步调用。
    beforeMount在挂载开始之前被调用
    相关的 render 函数首次被调用。
    mounted实例被挂载后调用
    这时 el 被新创建的 vm.$el 替换了。
    beforeUpdate数据更新时被调用,发生在虚拟DOM达不到之前。
    updated在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
    beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。
    destroyed实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

    4.3 Vue 3 生命周期介绍

    Vue3生命周期选项描述Vue3 生命周期钩子描述
    beforeCreate在组件实例初始化完成之后立即调用不需要-
    created在组件实例处理完所有与状态相关的选项后调用不需要-
    beforeMount在组件被挂载之前调用onBeforeMount()注册一个钩子,在组件被挂载之前被调用
    mounted在组件被挂载之后调用onMounted()注册一个回调函数,在组件挂载完成后执行
    beforeUpdate在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用onBeforeUpdate()注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用
    updated在组件即将因为一个响应式状态变更而更新其 DOM 树之后调用onUpdated()注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用
    beforeUnmount在一个组件实例被卸载之前调用onBeforeUnmount()注册一个钩子,在组件实例被卸载之前调用
    unmounted在一个组件实例被卸载之后调用onUnmounted()注册一个回调函数,在组件实例被卸载之后调用
  • 相关阅读:
    最长公共子串 动态规划
    dmesg 崩溃分析
    javascript深度理解数组的sort()排序
    vueRouter 重定向 高亮 传参 嵌套 简单示例
    Linux 禁止用户或 IP通过 SSH 登录
    一个非常实用的分布式 JVM 监控工具
    避免defer陷阱:拆解延迟语句,掌握正确使用方法
    APS计划排程结果的量化评价
    vue服务端渲染ssr
    python批量重命名工具
  • 原文地址:https://blog.csdn.net/qq_28550263/article/details/126049590