小程序 setData 动态 key 的写法

article/2025/8/27 2:52:52

setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。

本篇文章主要说一说 setData 的正确使用和动态 key 的使用。

Page.prototype.setData(Object data, Function callback)

#1 什么时候应该使用 setData 函数？

#2 常用的 setData 函数使用方法

（1）修改数组的指定项值

（2）修改对象的指定属性值

（3）callback 函数的使用

#3 动态 key 的写法

Page.prototype.setData(Object data, Function callback)

说明：setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

setData 函数参数说明：

字段类型必填描述
data Object 是这次要改变的数据
callback Function 否 setData引起的界面更新渲染完毕后的回调函数

#1 什么时候应该使用 setData 函数？

有需要更新视图时才使用。若无需修改视图，可直接写 this.data.xxx='xx'；

#2 常用的 setData 函数使用方法

先上一段默认的数据

Page({data: {basic:{name:'helang',email:'helang.love@qq.com',age:24},hobby: ['爬山', '游泳', '阅读'],job:'web前端工程师'},onLoad: function () {}
})

（1）修改数组的指定项值

/*方法一：先修改数组，后更新视图ps:如果数组中有大量值修改时推荐使用该方法
*/
this.data.hobby[0]="写代码";
this.setData({"hobby": this.data.hobby
});/*方法二：指定数组项更新ps:如果只有某一项发生改变时推荐使用该方法
*/
this.setData({"hobby[0]":'写代码'
});

（2）修改对象的指定属性值

/*方法一：先修改对象的值，后更新视图ps:如果对象中有大量值修改时推荐使用该方法
*/
this.data.basic.email="1846492969@qq.com";
this.setData({"basic":this.data.basic
})/*方法二：指定数组项更新ps:如果只有某一项发生改变时推荐使用该方法
*/
this.setData({"basic.email": "1846492969@qq.com"
})

（3）callback 函数的使用

/*常规写法
*/
this.setData({"job": "web前端"
})
console.log(this.data.job);/* 使用 callback 函数写法。如果有需要在更新视图之后运行的代码，推荐使用该方法。功能表现上与 上述 写法一致。
*/
this.setData({"job": "web前端"
},()=>{console.log(this.data.job);
})

#3 动态 key 的写法

有些时候，使用动态 key 的要求可能是因为后端，也有可能是为使代码美观。

小编在遇到该需求时，写下了如下代码：

let key ="basic.name";
this.setData({key: "河浪"
})

结果悲剧了，没能成功的更新视图上的 {{basic.name}} 值，结果是在 this.data 属性中新增加了一个 key:"河浪" 的值。

NO NO NO，这不是我想要的。但当时也没多想，通过一个个写 key 的方式完成了功能需求。

正确的写法应该是这样的！

let key ="basic.name";
this.setData({[key]: "河浪"
})

那么，现在用动态 key 的方式来一波实际点的骚操作吧。

let { keys,values} = {keys:["basic.name", "hobby[1]", "job"],values:["河浪", "写代码", "web前端"]
};
keys.forEach((item,index)=>{  this.setData({[item]: values[index]})
});

当然，上面的代码只是为了演示动态 key 的使用，如果知道要修改那些 key 的情况下，推荐使用在 setData 函数中传入多个 key。

在文章的结尾附上与本篇文章有关的官方文档地址：