前言

• 調試基礎庫 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// 應該使用 setDatathis.setData({text: 'changed data'})},changeNum: function() {// 或者，可以修改 this.data 之后馬上用 setData 設置一下修改了的字段this.data.num = 1this.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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。