专栏首页极乐技术社区微信小程序—setData()的使用方法和注意事项

微信小程序—setData()的使用方法和注意事项

在小程序中各个页面之间是相互独立的,一个页面分为渲染层(视图层 webview)、逻辑层、系统层(底层)。在架构上,WebView和JavascriptCore都是独立的模块,并不具备数据直接共享的通道。换而言之,若要将逻辑层中的data的数据渲染到页面中,他们之间是无法直接通信的,往往需要系统层作为中间角色。 我们都知道视图层的数据来源于逻辑层data,而视图图层若想要改变逻辑层data的数据,需要借助setData这个方法去触发,以达到更新视图层的数据,具体的过程是怎么样的呢?

1

setData是什么?

定义: 设置数据,更改数据 作用: setData函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的this.data的值(同步)。

仔细细品这句话,会包含了很多信息

  • setData它是微信小程序提供的一个内置的接口,是用于改变逻辑层中data下的数据的。
  • 视图层 view的数据挂载在逻辑层的data下,发送到视图层中是异步的。
  • 改变this.data是同步,换句话说,若直接修改 this.data 而不调用 this.setData方法,是无法改变页面的状态的,还会造成数据不一致。

从上面的这张图中就可以看到,当逻辑层data数据渲染到界面的时候,逻辑层的数据需要经过系统层,当系统层接收到这个逻辑层的数据后,系统层在把数据转发给渲染层,然后在渲染层展示出来,在这个过程当中是异步的。

视图层和逻辑层的数据传输,实际上通过两边提供的JavScript Core所实现,即用户传输的数据,需要将其转换为字符串形式传递,同时把转换后的数据内容拼接成一份 JS 脚本,再通过执行 JS 脚本的形式传递到两边独立的环境。

2

setData()方法的使用

setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。

参数说明:

Object 以 key: value 的形式表示,将 this.data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出,支持改变数组中的某一项或对象的某个属性,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。

注意:

  1. 直接修改this.data,而不调用this.setData(),是无法改变当前页面的状态的,会导致数据不一致
  2. 仅支持可以JSON化的数据
  3. 单次设置的数据不能超过1024KB,尽量避免一次设置过多的数据
  4. 不要把data中的任何一项的value设为undefined,否则这一项将不能被设置,可能会有潜在的问题

使用:先给出代码,wxss没有什么意义就不贴了。一般会用到小程序中封装好的setdata方法:

/** `setData` 函数用于将数据从逻辑层发送到视图层 *(异步),同时改变对应的 `this.data` 的值(同步)。 * * **注意:** * * 1. **直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致**。 * 1. 仅支持设置可 JSON 化的数据。 * 1. 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。 * 1. 请不要把 data 中任何一项的 value 设为 `undefined` ,否则这一项将不被设置并可能遗留一些潜在问题。 */ setData( /** 这次要改变的数据 * * 以 `key: value` 的形式表示,将 `this.data` 中的 `key` 对应的值改变成 `value`。 * * 其中 `key` 可以以数据路径的形式给出,支持改变数组中的某一项或对象的某个属性,如 `array[2].message`,`a.b.c.d`,并且不需要在 this.data 中预先定义。 */ data: Partial<D> & IAnyObject, /** setData引起的界面更新渲染完毕后的回调函数,最低基础库:`1.5.0` */ callback?: () => void ): void

index.wxml

1 <view class="numview">test01======={{test01}}</view> 2 <view class="numview">test02======={{test02}}</view> 3 <button bindtap="testfun">测试</button>

index.js

1 Page({ 2 data: { 3 test01: 1, 4 test02: 2 5 }, 6 testfun: function() { 7 var that = this; 8 if (this.data.test01 == 1) { 9 that.setData({ 10 test02:8 11 }) 12 console.log(this.data.test02) 13 } 14 }, 15 onLoad: function() {}, 16 })

此时经过编译后模拟器的显示:

这里都容易理解,当点击了button按钮后,触发点击事件执行testfun函数,将test02设置为8,如图:

通过this.data.test02=8这种方式直接赋值可以吗,答案是不可以,看下面:

使用this.data.test02=10的结果不会渲染到前台页面中显示,但是后台已经改变,会造成前后台数据不一致

我又想到是不是可以先通过this.data.test02=10赋值,再通过this.setData渲染呢?

1 onLoad: function() { 2 this.data.test02 = 10; 3 this.setData({ 4 test02 5 }) 6 }

编译报错:test02 is not defined;

为什么呢?再进行一项测试:

1 onLoad: function() { 2 this.data.test02 = 10; 4 this.setData({ 5 test03: 20 6 }) 7 console.log(this.data.test03) 8 } 复制代码

编译后显示:

发现了什么?我个人觉得是这样的:

  • this.setData中设置的key和value,如果在data中已有定义,则修改data中原变量的值,直接渲染到前台并修改原data中的数据;
  • 如果data中没有定义该key,则setData自动创建,这个可以从打印结果中发现(this.data.test03,data中没有定义);
  • 不能直接使用this.data.属性赋值,
  • setData需要设置key和value

3

setData()注意事项

1、频繁的去setData

在我们分析过的一些案例里,部分小程序会非常频繁(毫秒级)的去setData,其导致了两个后果:

  • Android下用户在滑动时会感觉到卡顿,操作反馈延迟严重,因为JS线程一直在编译执行渲染,未能及时将用户操作事件传递到逻辑层,逻辑层亦无法及时将操作处理结果及时传递到视图层;
  • 渲染有出现延时,由于WebView的JS线程一直处于忙碌状态,逻辑层到页面层的通信耗时上升,视图层收到的数据消息时距离发出时间已经过去了几百毫秒,渲染的结果并不实时;

2、每次setData都传递大量新数据

由setData的底层实现可知,我们的数据传输实际是一次evaluateJavascript脚本过程,当数据量过大时会增加脚本的编译执行时间,占用WebView JS线程。

3、后台态页面进行setData

当页面进入后台态(用户不可见),不应该继续去进行setData,后台态页面的渲染用户是无法感受的,另外后台态页面去setData也会抢占前台页面的执行。

结语

在本文中主要介绍了下setData的使用,它是用于修改挂载在data下面的数据的,当想要修改视图view,那么需要借助setData函数,它接收两个参数,第一个参数时必传的,也就是要修改视图view层的对象,而第二个参数时非必传的。 setData将数据从逻辑层发送到视图层是异步,同时改变对应的this.data的值是同步,它并不是实时的,这也导致了必须要考虑性能的因素。从而介绍了setData的使用注意事项,值得注意的是,如何修改对象下的某个属性,这个在往后的开发中,是使用比较频繁的。 如果小伙伴们有问题,欢迎大家下面留言,一起学习讨论~

本文分享自微信公众号 - 极乐技术社区(wxapp-union)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-12-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序:setData方法详解和注意事项

    在微信小程序中经常会使用到setData函数把变量渲染到视图层,那么什么是setData呢?如何使用?注意事项有些什么?下面我们就来详细了解一下!

    极乐君
  • Content-Disposition使用方法和注意事项

    希望某类或者某已知MIME 类型的文件(比如:.gif;.txt;*.htm)能够在访问时弹出“文件下载”对话框 希望以原始文件名(上传时的文件名,例如:山东省...

    用户2323866
  • wait()方法和notify()方法使用时的注意事项

    我们看程序出线了异常。原因是我们没有添加synchronized关键字,所以线程获取不到锁,而直接抛出的异常。

    吉林乌拉
  • Java中使用方法的注意事项

    一只胡说八道的猴子
  • 微信小程序——使用setData修改数组中的单个对象

    微信小程序已经出来挺久的时间了,之前只是在文档上粗略的看了一下,最近稍得空闲,便利用微信小程序平台写一个练手的项目,顺便学习一下小程序开发,感觉大体跟前端开发基...

    Originalee
  • 调用控制台程序的方法以及注意事项

    这个时候我们可以在控制台中调用该库,然后在代码中调用控制台程序,以此控制台的来管理内存。

    用户2434869
  • 微信小程序----修改data中的数据,页面数据不改变

    Rattenking
  • java中接口(interface)及使用方法和注意事项

    1、接口:一种把类抽象的更彻底,接口里只能包含抽象方法的“特殊类”。接口不关心类的内部状态数据,定义的是一批类所遵守的规范。(它只规定这批类里必须提供某些方法,...

    用户7886150
  • 微信小程序开发需要什么步骤 有什么注意事项

    微信作为目前中国使用人群最为庞大,使用范围最为广泛聊天软件,不少人看中了微信之下隐藏的商机:微信小程序。但对于大部分人来说,对于小程序的了解仅限于使用范围。那么...

    用户8715145
  • 【Web技术】281- 滴滴开源小程序框架 Mpx2.0

    Mpx是一款致力于提高小程序开发体验和效率的增强型小程序框架,目前在滴滴公司内部支撑了包括滴滴出行小程序,滴滴出行广场小程序,青桔单车,黑马电单车,小桔养车,小...

    pingan8787
  • 微信小程序使用字体图标的方法

    一、先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 image.png 从项目里下载下来并解压...

    李文杨
  • 小程序---微信本地存储的方法使用

    需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

    半指温柔乐
  • 微信小程序中 setData 详解

    在小程序中各个页面之间是相互独立的,一个页面分为渲染层(视图层 webview),逻辑层(JavaScript),系统层(底层)

    itclanCoder
  • Java中构造函数、set/get方法和toString方法的使用及注意事项

    构造函数的最大作用就是创建对象时完成初始化,当我们在new一个对象并传入参数的时候,会自动调用构造函数并完成参数的初始化。如下:

    用户7886150
  • 小程序开发中的一些实践和踩坑

    在公司小程序也开发了一段时间了,中间遇到过很多问题,特此记录几个比较典型的问题和解决方案。

    张张
  • 小程序开发中的一些实践和踩坑

    在公司小程序也开发了一段时间了,中间遇到过很多问题,特此记录几个比较典型的问题和解决方案。

    张张
  • 真实测评:用uni-app开发小程序,比原生开发好用在哪里?

    原生wxml开发对Node、预编译器、webpack支持不好,影响开发效率和工程构建流程。所以大公司都会用框架开发

    极乐君
  • ESA2GJK1DH1K基础篇: 源码使用注意事项和程序优化

    屏蔽前:如果心跳包间隔内持续接收到服务器数据,不会发送心跳包,因为收到数据默认就是在线!

    杨奉武
  • 干货丨微信小程序开发流程简介以及各环节注意事项

    据阿拉丁小程序统计平台发布的2018上半年小程序生态白皮书,截至6月底,微信小程序C端用户达到2.8亿,小程序数量达到100万,同时微信开放了64个小程序场景入...

    齿轮易创说互联网

扫码关注云+社区

领取腾讯云代金券