在小程序中各个页面之间是相互独立的,一个页面分为渲染层(视图层 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 中预先定义。
注意:
直接修改this.data,而不调用this.setData(),是无法改变当前页面的状态的,会导致数据不一致仅支持可以JSON化的数据单次设置的数据不能超过1024KB,尽量避免一次设置过多的数据不要把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 & IAnyObject, /** setData引起的界面更新渲染完毕后的回调函数,最低基础库:`1.5.0` */ callback?: () => void): void
index.wxml
1 test01======={{test01}}2 test02======={{test02}}3 测试
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:811 })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 test025 })6 }
编译报错:test02 is not defined;
为什么呢?再进行一项测试:
1 onLoad: function() {2 this.data.test02 = 10;4 this.setData({5 test03: 206 })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和value3
setData()注意事项
1、频繁的去setData
在我们分析过的一些案例里,部分小程序会非常频繁(毫秒级)的去setData,其导致了两个后果:
Android下用户在滑动时会感觉到卡顿,操作反馈延迟严重,因为JS线程一直在编译执行渲染,未能及时将用户操作事件传递到逻辑层,逻辑层亦无法及时将操作处理结果及时传递到视图层;渲染有出现延时,由于WebView的JS线程一直处于忙碌状态,逻辑层到页面层的通信耗时上升,视图层收到的数据消息时距离发出时间已经过去了几百毫秒,渲染的结果并不实时;2、每次setData都传递大量新数据
由setData的底层实现可知,我们的数据传输实际是一次evaluateJavascript脚本过程,当数据量过大时会增加脚本的编译执行时间,占用WebView JS线程。
3、后台态页面进行setData
当页面进入后台态(用户不可见),不应该继续去进行setData,后台态页面的渲染用户是无法感受的,另外后台态页面去setData也会抢占前台页面的执行。
结语在