一、setData
小程序页面加载渲染时是通过获取js文件中Page里面初始化数据data来进行渲染。
js：
/**
* 页面的初始数据
*/
data: {
name:\'张三\',
},
wxml：
<text>{{name}}</text>
结果：
完成渲染后，直接通过赋值是无法改变页面中所显示的数据，只能通过setData来改变（每次最多只能改变1M数据）。
如果通过直接赋值，如：this.data.name = \'李四\' ，是无法改变页面的显示，还会造成视图层和数据层数据不一致。
在js中onLoad函数中运行this.data.name = \'李四\'
onLoad: function(options) {
this.data.name = \'李四\'； // 运行该命令修改data.name
},
结果无法改变视图显示
正确改变页面显示的做法：
js:
运行setData前页面初始化时的数据：
/**
* 页面的初始数据
*/
data: {
name: \'张三\',
age: 17,
},
运用setData后：
this.setData({
name:\'李四\',
age:18
})
结果：
二、setData运用场景和方法
只要需要改变页面显示都需要运用setData （请求数据wx.request 后、 交互后 需要改变页面显示都需要通过setData 来改变）
1、改变对象某个属性
this.setData({
[\'info.name\']: \'李四\', // 此时属性名需要用字符串
[\'info.age\']: 18
})
2、改变数组某个元素或对象属性
为了不影响性能不建议一次性更新整个数组（如果数组数据太大），应该只更新某个元素。
确定改变某个元素：
let str =`lists[2].name`; // 此时属性名需要用字符串
this.setData({
[str]:李四,
})
不确定改变的是哪个元素（交互时，用户点击数组的某个元素对应改变显示内容）：
用户点击时可以把所点击的下标传回进行对应的更改；
click(i){
let index=1;
let str = `lists[${index}].name`；// 此时属性名需要用字符串
this.setData({
[str]:\'李四\',
})
}
3、分页（适用于上拉加载更多）
分页为了避免一次性更新太多数据，建议把数据设计成二维数组如下：
通过wx:if来渲染。
每次加载新页面时在users后面新添加一页数据即可
users: [
[{name: \'张三\',age: 17}, {name: \'张三\',age: 17}], // 第一页数据
[{name: \'张三\',age: 17}, {name: \'张三\',age: 17}] // 第二页数据
。。。。
[{name: \'张三\',age: 17}, {name: \'张三\',age: 17}] // 第n页数据
]
let str = `users[${page}]`;
let datas=[{name: \'张三\',age: 17}, {name: \'张三\',age: 17}]; // 第n页数据
this.setData({
[str]:datas
})
wxml:
<block wx:for="{{users}}">
<view wx:for="{{item}}" wx:for-item="userItem">
<text>{{userItem.name}}</text>
<text>{{userItem.name}}</text>
</view>
</block>
以上是本人初学小程序的笔记，如有错误请指出
