onload和onshow的区别、async与await之间的关系以及异步函数的概念

1、onload事件:

  • onload事件时在网页或者图片完全加载完成后触发的,它适用于整个网页加载时,该方法就会执行一次,适合用于进行页面初始化工作和获取一次性数据。在onload方法中可以通过this获取到页面实例,并且可以接受页面跳转时传递的参数
  • onload事件可以用来执行一些初始化操作,比如对页面元素进行操作、请求远程数据、绑定事件监听器等。

2、onShow事件:

  • 表示页面每次展示时都会触发,当一个页面从隐藏状态再次展示时,该方法会被触发,可以多次的调用。适合用于进行页面更新和数据刷新等操作。在onShow方法中,也可以通过this获取到页面实例,并且可以获取到页面参数。

onlad实例:

onload和onshow的区别、async与await之间的关系以及异步函数的概念_第1张图片通过页面跳转将id传入到另外一个页面set.vue,set页面通过onLoad获取数据option接受id打印出option的值,如果接受到了option=id

onload和onshow的区别、async与await之间的关系以及异步函数的概念_第2张图片

onload和onshow的区别、async与await之间的关系以及异步函数的概念_第3张图片我们发现option被id赋值为9,而且时页面完全加载的时候才显示,说明页面onload必须等页面完全加载的时候才能触发。如果去掉onload的话option就不会被赋值。后面出现的是另一个接口的数据,并不是id赋值的接口,所以不用管,我们发现点进去瞬间页面加载完成,所以option赋值为9

onload和onshow的区别、async与await之间的关系以及异步函数的概念_第4张图片

onShow实例:

我们就以加载动画作为实例,更加onShow的定义,我这里定义的是首页,只要该页面重新展示则加载动画就会重新触发

onload和onshow的区别、async与await之间的关系以及异步函数的概念_第5张图片

async与await之间的关系:

    在uniapp中,await关键字不能单独使用。await必须与async函数配合使用,用于等待一个Promise对象的处理结果。async函数是ES7引入的新特性,它将函数返回值自动封装成一个Promise对象,使得在函数内部可以使用await来等待异步任务的执行结果。在uniapp中,通常我们会在方法前面添加async修饰符来声明一个异步函数,并在需要等待异步任务结果的地方使用await关键字。这样可以保证异步任务能够按照顺序执行,并且得到正确的结果。

async的优点:可以是异步函数和方法在实现时更简洁、可读性更高的代码。当我们需要再Vue组件中执行异步操作时,就可以使用async/await结合promise对下来处理异步行为。

什么是异步函数

什么是异步函数:异步函数是一个特殊的函数,它可以在执行某些耗时操作时,暂停当前任务,等待这些操作完成后再继续执行。通常,异步函数会返回一个promise对象,用于表示异步操作的最终结果。

异步函数优势:异步函数的优势在于可以提高程序的响应性和并发性。使用异步函数可以执行网络请求、文件读写、数据库操作等IO密集型任务,避免阻塞主线程等待操作完成,从而提高程序的性能和用户体验

实例:

这里我们以接口中数据的插入为例:

这里先声明confors是一个异步函数通过async修饰

onload和onshow的区别、async与await之间的关系以及异步函数的概念_第6张图片

这是要插入的数据TypeGreen

onload和onshow的区别、async与await之间的关系以及异步函数的概念_第7张图片

BillLisetInsert是插入数据的处理函数,用await修饰

onload和onshow的区别、async与await之间的关系以及异步函数的概念_第8张图片

运行成功的话,页面就会出现新的对象,控制台也数组会出现新的对象

如果我删除其中一个,则插入功能就无法实现:

如果删除async,保留await,comfors失去了async修饰,则会报错,因为await的存在是绑定async的,如果没有async修饰则await就无法使用

onload和onshow的区别、async与await之间的关系以及异步函数的概念_第9张图片onload和onshow的区别、async与await之间的关系以及异步函数的概念_第10张图片

如果只删除await不删除async的话,虽然不会报错,但是页面无法添加新的对象,控制台数组中也获取不了新的对象

我们可以发现当我输入保险这个对象名时,页面并没有生成对应的对象,控制台也没有生成相应数组中相应的对象,因为光有async异步函数,没有await修饰的异步处理结果,所以就无法输出相应的结果。

总结:

onLoad和onShow两者的区别在于主要在于触发时机和使用场景:

  • onLoad:页面加载时触发,适合进行页面的初始化操作,比如可以在onLoad方法中进行网络请求、初始化数据等操作
  • onShow:页面每次展示时触发,适合进行页面的更新和数据的刷新,比如可以在onShow方法中更新页面数据、重新加载列表等操作

async和await是绑定的修饰符,async修饰异步函数,await修饰异步执行的结果

异步函数使用可以避免阻塞主线程等待操作完成,提高程序性能和用户体验

你可能感兴趣的:(vue,uniapp,前端,javascript,开发语言)