[uniapp生命周期]详细讲解uniapp中那些属于vue生命周期,那些属于uniapp独有的生命周期,以及这中间的区别 相关的内容和api 代码注释

目录

    • 1. Vue.js生命周期函数
    • 2.Vue生命周期函数代码
      • beforeCreate
      • created
      • beforeMount
      • mounted
      • beforeUpdate
      • updated
      • beforeDestroy
      • destroyed
      • $nextTick
      • $forceUpdate
      • $destroy
    • 3. UniApp独有的生命周期函数
      • onLaunch
      • onShow
      • onHide
      • onError
    • 4.总结

在UniApp中,除了Vue.js的生命周期函数外,还有一些UniApp独有的生命周期函数。下面是它们的详细解释及其区别:

1. Vue.js生命周期函数

  • beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。
  • created:实例已经创建完成之后被调用。在这一步,实例已完成数据观测、属性和方法的运算,同时也可以进行 DOM 操作。但是,挂载阶段还没开始,$el 属性目前不可见。
  • beforeMount:在挂载开始之前被调用。相关的渲染函数首次被调用。
  • mounted:el 被新创建的 vm.$ el 替换,并挂载到实例上去之后调用该钩子。如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内。
  • beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。这里适合在更新之前访问现有 DOM,比如手动移除已添加的事件监听器。
  • updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。调用时,组件 DOM 已经更新,所以可以执行依赖于 DOM 的操作。
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed:实例销毁之后调用。该钩子被调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

Uniapp是基于Vue.js的跨平台开发框架,因此其生命周期与Vue.js的生命周期类似。以下是uniapp中常用的生命周期函数和相关API的详细讲解和代码注释:

2.Vue生命周期函数代码

beforeCreate

在实例初始化之后,数据观测和事件配置之前被调用。

export default {beforeCreate() {console.log('beforeCreate')}
}

created

实例创建完成后被立即调用。

export default {created() {console.log('created')}
}

beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

export default {beforeMount() {console.log('beforeMount')}
}

mounted

实例挂载后调用,此时组件 DOM 已经渲染出来了。

export default {mounted() {console.log('mounted')}
}

beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。

export default {beforeUpdate() {console.log('beforeUpdate')}
}

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用。

export default {updated() {console.log('updated')}
}

beforeDestroy

实例销毁之前调用。

export default {beforeDestroy() {console.log('beforeDestroy')}
}

destroyed

实例销毁后调用。

export default {destroyed() {console.log('destroyed')}
}

$nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

this.$nextTick(() => {// DOM 更新完成后执行的回调函数
})

$forceUpdate

迫使 Vue 实例重新渲染。

this.$forceUpdate()

$destroy

完全销毁一个实例。清理它与其他实例的连接,解绑它的全部指令及事件监听器。

this.$destroy()

3. UniApp独有的生命周期函数

onLaunch

  • onLaunch:当小程序初始化完成时,会触发 onLaunch(全局只触发一次)。参数中可以获取到小程序的启动参数,如路径、场景值等。

onShow

  • onShow:当小程序启动,或从后台进入前台显示,会触发 onShow。参数中可以获取到小程序的启动参数,如路径、场景值等。

onHide

  • onHide:当小程序从前台进入后台,会触发 onHide。

onError

  • onError:当小程序发生脚本错误或 API 调用失败时,会触发 onError 并带上错误信息。

这些生命周期函数的区别在于它们被触发的时机和作用范围不同。Vue.js的生命周期函数主要是针对组件的,而UniApp独有的生命周期函数是针对整个小程序的。其中,onLaunch和onShow是非常重要的生命周期函数,可以用来初始化一些全局变量或执行一些全局操作。

代码注释如下:

export default {beforeCreate() {// 在实例初始化之后,数据观测和事件配置之前被调用},created() {// 实例已经创建完成之后被调用},beforeMount() {// 在挂载开始之前被调用},mounted() {// el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子},beforeUpdate() {// 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前},updated() {// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子},beforeDestroy() {// 实例销毁之前调用},destroyed() {// 实例销毁之后调用},onLaunch(options) {// 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)},onShow(options) {// 当小程序启动,或从后台进入前台显示,会触发 onShow},onHide() {// 当小程序从前台进入后台,会触发 onHide},onError(error) {// 当小程序发生脚本错误或 API 调用失败时,会触发 onError 并带上错误信息}
}

4.总结

Uniapp的生命周期说白了== >Vue的生命周期函数+uniapp自定义的生命周期函数
但是在开发中 大都是基于vue的组件思路 所以常用的还是 Vue的生命周期

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/685566.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[职场] 会计学专业学什么 #其他#知识分享#职场发展

会计学专业学什么 会计学专业属于工商管理学科下的一个二级学科,本专业培养具备财务、管理、经济、法律等方面的知识和能力,具有分析和解决财务、金融问题的基本能力,能在企、事业单位及政府部门从事会计实务以及教学、科研方面工作的工商管…

【摸鱼日常】使用Docker部署RPG网页小游戏

一、本次实践介绍 1. 本次实践简介 本次实践部署环境为个人测试环境,快速使用docker部署RPG网页小游戏。 rootWellDone:/home/goodjob# uname -a Linux WellDone 6.5.0-14-generic #14~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Mon Nov 20 18:15:30 UTC 2 x86_64 x86_…

Linux:docker搭建redis集群(3主3从扩容缩容 哈希槽分配)

操作系统:centos7 docker-ce版本:24.0.7 1.准备redis镜像 我这里使用redis 6.0.8 镜像进行操作,如果你也需要镜像,在网络正常情况下直接使用 docker pull redis:6.0.8 即可进行下载,如果你没配置国内加速器&#x…

DS:八大排序之直接插入排序、希尔排序和选择排序

创作不易,感谢三连支持!! 一、排序的概念及运用 1.1 排序的概念 排序:所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起 来的操作。稳定性&…

2402,如何正确的最佳方式对付新冠

这几天,连着发了几天的烧,配合感冒冲剂,荆防颗粒,同新冠进行了5次2小时的斗争. 最后,我发现,同新冠直接斗争,是很傻的行为. 为啥,我要直接同新冠斗争呢? 为啥不让新冠同环境中的消毒剂斗争呢?消毒剂是化学药品,病毒最怕的就是这些玩意! 只要我的局部环境充满了消毒剂,新冠要同…

leetcode:96.不同的二叉搜索树

解题思路: 输入n3 n 0 1个 n 1 1个 n 2 2个 头1头2头3 头1 左子树0节点(个数)x右子树2个节点(个数) 头2 左子树1节点(个数)x右子树1个节点(个数) 头3 左子…

操作字符串之子串削除-11-${string%%substring}

1.${string%%substring} 从$string的结尾位置截掉最短匹配的$substring 2.实例 操作字符串样例:string123ABCabc456xyzabc 字符串操作默认从右边开始进行 命令: echo ${string%%a*c} [rootkibana ~]# echo ${string%%a*c} 123ABC #从$string的结尾…

集群聊天项目

不懂的一些东西 (const TcpConnectionPtr&)作为形参啥意思:接收一个常量引用,函数内部不允许修改该指针所指向的对象。 优势 1.网络层与业务层分离:通过网络层传来的id,设计一个map存储id以及对印的业务处理器&…

mysql 2-16

安全等于<> 最大最小LEAST,GREATEST BETWEEN AND 条件一是下限 IN LIKE关键字 转移字符 逻辑运算符 位运算符 排序数据 升序降序&#xff0c;默认升序 二级排序 8.0新特性 小拓展 多表查询 多表查询 别名 多表查询的分类 非等值连接 自连接 内连接与外连接 sql92实现外连…

【前端工程化面试题】如何优化提高 webpack 的构建速度

使用最新版本的 Webpack 和相关插件: 每个新版本的 Webpack 都会带来性能方面的改进和优化&#xff0c;因此始终确保你在使用最新版本。同时&#xff0c;更新你的相关插件也是同样重要的。 合理配置 Webpack: 优化 Webpack 的配置文件&#xff0c;包括合理设置 entry、output、…

TenorFlow多层感知机识别手写体

文章目录 数据准备建立模型建立输入层 x建立隐藏层h1建立隐藏层h2建立输出层 定义训练方式建立训练数据label真实值 placeholder定义loss function选择optimizer 定义评估模型的准确率计算每一项数据是否正确预测将计算预测正确结果&#xff0c;加总平均 开始训练画出误差执行结…

倒计时52天(待续,,,

寒假学习内容总复习上&#xff1a; 倒计时67天-CSDN博客 1. #include<bits/stdc.h> using namespace std; #define int long long const int N2e56; const int inf0x3f3f3f3f; int month[13]{0,31,28,31,30,31,30,31,31,30,31,30,31}; int a[110]; void solve() {for(…

【超级干货】ArcGIS_空间连接_工具详解

帮助里对空间连接的解释&#xff1a; 根据空间关系将一个要素的属性连接到另一个要素。 目标要素和来自连接要素的被连接属性写入到输出要素类。 如上图所示&#xff0c;关键在于空间关系&#xff0c;只有当两个要素存在空间关系的时候&#xff0c;空间连接才有用武之地。 一…

JavaScript_00001_00000

contents 简介变量与数据类型自动类型转换强制类型转换 简介 变量与数据类型 根据变量定义的范围不同&#xff0c;变量有全局变量和局部变量之分。直接定义的变量是全局变量&#xff0c;全局变量可以被所有的脚本访问&#xff1b;在函数里定义的变量称为局部变量&#xff0c;…

【leetcode热题】对称二叉树

难度&#xff1a; 简单通过率&#xff1a; 42.2%题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述 给定一个二叉树&#xff0c;检查它是否是镜像对称的。 例如&#xff0c;二叉树 [1,2,2,3,4,4,3] 是对称的。 1/ \2 …

JavaWeb之Servlet接口

Servlet接口 什么是Servlet&#xff1f; Servlet是一种基于Java技术的Web组件&#xff0c;用于生成动态内容&#xff0c;由容器管理&#xff0c;是平台无关的Java类组成&#xff0c;并且由Java Web服务器加载执行&#xff0c;是Web容器的最基本组成单元 什么是Servlet容器&…

杂文随笔_

己写于亥年正月廿六&#xff0c;校图书馆&#xff0c;天气阴 “你的工作将会是你生活中很大一部分&#xff0c;唯一能使自己得到真正满足的是&#xff0c;做你伟大的工作,做一份伟大的工作的唯一方法是&#xff0c;热爱你所做的工作。“这是乔布斯在斯坦福大学的一次演讲所说的…

【c++】list详细讲解

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟悉list库 > 毒鸡汤&#xff1a;你的脸上云淡…

外部中断0实验

实现现象&#xff1a;下载程序后&#xff0c;操作K3按键使LED1&#xff08;D11&#xff09;状态取反 注意事项&#xff1a;无。 #include "reg52.h" //此文件中定义了单片机的一些特殊功能寄存器typedef unsigned int u16; //对数据类型进行声明定义 typed…

定时器1中断实验

实现现象&#xff1a;下载程序后&#xff0c;静态数码管间隔一秒循环显示0-F。使用单片机内部定时器可以实现准确延时。 注意事项&#xff1a; 程序代码&#xff1a; #include "reg52.h" //此文件中定义了单片机的一些特殊功能寄存器typedef unsigned int u16; …