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

发表时间：2021-1-5

发布人：葵宇科技

浏览次数：97

在小程序中各个页面之间是相互独立的，一个页面分为渲染层(视图层 webview)、逻辑层(JavaScript)、系统层(底层)。在架构上，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: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 的使用注意事项,值得注意的是,如何修改对象下的某个属性,这个在往后的开发中,是使用比较频繁的。

如果小伙伴们有问题,欢迎大家下面留言,一起学习讨论。