前言

• 調(diào)試基礎(chǔ)庫 2.12.0
• 開發(fā)者工具 1.03.2008270

setData 的用法

Page.prototype.setData(Object data, Function callback)
setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時改變對應(yīng)的 this.data 的值（同步）。
data Object 以 key: value 的形式表示，將 this.data 中的 key 對應(yīng)的值改變成 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// 應(yīng)該使用 setDatathis.setData({text: 'changed data'})},changeNum: function() {// 或者，可以修改 this.data 之后馬上用 setData 設(shè)置一下修改了的字段this.data.num = 1this.setData({num: this.data.num})},changeItemInArray: function() {// 對于對象或數(shù)組字段，可以直接修改一個其下的子字段，這樣做通常比修改整個對象或數(shù)組更好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);

改進(jìn)一下(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限制

核心思想就是分頁。調(diào)用一次setData的限制是1024KB，那就每次只更新一頁數(shù)據(jù)。可以參考這里：https://github.com/lanfeng1993/LoadDataDemo

繞過setData的1024KB限制后，下一個遇到的就是全局的節(jié)點(diǎn)個數(shù)限制（嗯，真是東方不亮西方亮）。

Uncaught Dom limit exceeded, please check if there’s any mistake you’ve made.
這個是全局的節(jié)點(diǎn)個數(shù)限制，不應(yīng)該在一個頁面內(nèi)使用過多的節(jié)點(diǎn)。
“DOM limit exceeded”的原因：出于性能考慮，結(jié)點(diǎn)總量有個限制，所以請不要在頁面中使用過多節(jié)點(diǎn)。

注意事項(xiàng)

• 直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的，還會造成數(shù)據(jù)不一致。
• 僅支持設(shè)置可 JSON 化的數(shù)據(jù)。
• 單次設(shè)置的數(shù)據(jù)不能超過1024KB，請盡量避免一次設(shè)置過多的數(shù)據(jù)。
• 請不要把 data 中任何一項(xiàng)的 value 設(shè)為 undefined ，否則這一項(xiàng)將不被設(shè)置并可能遺留一些潛在問題。
• 參數(shù)和變量名稱一致，可用一個值代替（es6新語法特性）

1024KB的計(jì)算

setData 的 args 進(jìn)行 JSON.stringify 的結(jié)果 + 少量額外信息

約等于 JSON.stringify(setData 的 args)

setData調(diào)用頻率

setData接口的調(diào)用涉及邏輯層與渲染層間的線程通信，通信過于頻繁可能導(dǎo)致處理隊(duì)列阻塞，界面渲染不及時而導(dǎo)致卡頓，應(yīng)避免無用的頻繁調(diào)用。

每秒調(diào)用setData的次數(shù)不要超過 20 次。

setData數(shù)據(jù)大小

由于小程序運(yùn)行邏輯線程與渲染線程之上，setData的調(diào)用會把數(shù)據(jù)從邏輯層傳到渲染層，數(shù)據(jù)太大會增加通信時間。

setData的數(shù)據(jù)在JSON.stringify后不超過 1024KB

避免setData數(shù)據(jù)冗余

setData操作會引起框架處理一些渲染界面相關(guān)的工作，一個未綁定的變量意味著與界面渲染無關(guān)，傳入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數(shù)據(jù)冗余
https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#5.%20setData數(shù)據(jù)大小
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

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的【微信小程序】 setData 的用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。