【微信小程序】 setData 的用法_微信小程序setdata用法-CSDN博客

本文链接：https://blog.csdn.net/sayyy/article/details/108508300

前言

调试基础库 2.12.0
开发者工具 1.03.2008270

setData 的用法

Page.prototype.setData(Object data, Function callback)
setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
data Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value

简单示例

Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data' // 不要直接修改 this.data
    // 应该使用 setData
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    // 或者，可以修改 this.data 之后马上用 setData 设置一下修改了的字段
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

key 是变量

	let arrayIndex = e.detail.value;
	let obj = {};
	obj['array[' + arrayIndex  + '].text'] = 'changed data';
    this.setData(obj);

改进一下(key值可以为变量，为变量的时候要用[ ]引起来):

	let arrayIndex = e.detail.value;
    this.setData({
      ['array[' + arrayIndex  + '].text']:'changed data',
    });

再酷一些(ES6中的模板字符串使用反引号 (``) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。):

	let arrayIndex = e.detail.value;
    this.setData({
      [`array[${arrayIndex}].text`]:'changed data',
    });

绕过1024KB限制

核心思想就是分页。调用一次setData的限制是1024KB，那就每次只更新一页数据。可以参考这里：https://github.com/lanfeng1993/LoadDataDemo

绕过setData的1024KB限制后，下一个遇到的就是全局的节点个数限制（嗯，真是东方不亮西方亮）。

Uncaught Dom limit exceeded, please check if there’s any mistake you’ve made.
这个是全局的节点个数限制，不应该在一个页面内使用过多的节点。
“DOM limit exceeded”的原因：出于性能考虑，结点总量有个限制，所以请不要在页面中使用过多节点。

注意事项

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
仅支持设置可 JSON 化的数据。
单次设置的数据不能超过1024KB，请尽量避免一次设置过多的数据。
请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。
参数和变量名称一致，可用一个值代替（es6新语法特性）

1024KB的计算

setData 的 args 进行 JSON.stringify 的结果 + 少量额外信息

约等于 JSON.stringify(setData 的 args)

setData调用频率

setData接口的调用涉及逻辑层与渲染层间的线程通信，通信过于频繁可能导致处理队列阻塞，界面渲染不及时而导致卡顿，应避免无用的频繁调用。

每秒调用setData的次数不要超过 20 次。

setData数据大小

由于小程序运行逻辑线程与渲染线程之上，setData的调用会把数据从逻辑层传到渲染层，数据太大会增加通信时间。

setData的数据在JSON.stringify后不超过 1024KB

避免setData数据冗余

setData操作会引起框架处理一些渲染界面相关的工作，一个未绑定的变量意味着与界面渲染无关，传入setData会造成不必要的性能消耗。

参考

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#Page.prototype.setData(Object%20data,%20Function%20callback)
https://developers.weixin.qq.com/miniprogram/dev/framework/audits/best-practice.html#5.%20避免setData数据冗余
https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#5.%20setData数据大小
https://blog.csdn.net/hicoldcat/article/details/53967334
https://blog.csdn.net/namecz/article/details/79623550
https://blog.csdn.net/weixin_42460570/article/details/83346529
https://developers.weixin.qq.com/community/develop/doc/0006444c00c228225ea626f875b400
https://blog.csdn.net/weixin_43757001/article/details/105755117
http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4123
https://blog.csdn.net/luyaran/article/details/74662852

绕过1024KB限制

https://www.jianshu.com/p/602e536045b9
https://blog.csdn.net/Tane_1018/article/details/88816555
https://github.com/lanfeng1993/LoadDataDemo
https://blog.csdn.net/liyi1009365545/article/details/89680717