前言
在微信小程序中經(jīng)常會使用到setData函數(shù)把變量渲染到視圖層粱坤，那么什么是setData呢仑氛？如何使用械荷？注意事項(xiàng)有些什么翠拣？下面我們就來詳細(xì)了解一下角骤！
正文
- setData是小程序開發(fā)中使用最頻繁的接口，也是最容易引發(fā)性能問題的接口。
- setData函數(shù)用于將數(shù)據(jù)從邏輯層渲染到視圖層（異步）邦尊，同時改變對應(yīng)的this.data的值（同步）背桐。
實(shí)例1：簡單實(shí)現(xiàn)點(diǎn)擊修改變量值
<text>test：{{test}}</text>
<button bindtap="bindTest">點(diǎn)擊改變test值</button>
Page({
data: {
test: "我是測試變量"
},
bindTest: function () {
console.log("this.data.test：" + this.data.test);
this.setData({
test: "我是測試變量，我的值被改變了蝉揍！"
})
console.log("this.data.test：" + this.data.test);
}
})
效果：
實(shí)例解析：
- 代碼很容易理解链峭，點(diǎn)擊按鈕test變量的值被改變了，通過setData函數(shù)渲染到了前端展示又沾。
-
另外我在this.setDta前后分別打印出了this.data.test的值弊仪，看看最終打印結(jié)果：
在這里插入圖片描述
這里就說明了setData函數(shù)渲染到視圖層后，會同步修改this.data.test的值杖刷。
實(shí)例2：動態(tài)修改數(shù)組指定下標(biāo)的某個參數(shù)值（類似購物車）
<block wx:for="{{test}}" wx:key="index">
<view data-index="{{index}}" bindtap="bindTest">{{item.txt}}</view>
</block>
Page({
data: {
test: [
{ txt: "我是1號" },
{ txt: "我是2號" },
{ txt: "我是3號" }
]
},
bindTest: function (e) {
// 被點(diǎn)擊的view
let index = e.currentTarget.dataset.index;
// 根據(jù)index找到test對應(yīng)索引中對應(yīng)要修改的參數(shù)
let revise = "test[" + index + "].txt";
this.setData({
[revise]: "呃励饵，我被人給點(diǎn)了！；肌役听！"
})
}
})
效果
實(shí)例解析：
- 其實(shí)這個就是根據(jù)index找到test對應(yīng)索引中對應(yīng)要修改的參數(shù)，然后進(jìn)行修改并渲染到頁面上表窘；
- 該功能購物車選中狀態(tài)典予、數(shù)量更改都可以使用到；
- 此方法比使用循環(huán)尋找更改然后再渲染乐严，更方便瘤袖、性能更好！
注意事項(xiàng)
1.如果Page對象的data中沒有定義該key昂验，則setData自動創(chuàng)建捂敌；如有則修改data中原變量的值。
2.直接修改this.data既琴，而不調(diào)用this.setData()占婉，是無法改變當(dāng)前頁面的狀態(tài)的，會導(dǎo)致數(shù)據(jù)不一致呛梆。
3.使用this.setData({})時锐涯，注意this指向問題。
4.僅支持可以JSON化的數(shù)據(jù)填物。
5.單次設(shè)置的數(shù)據(jù)不能超過1024KB纹腌，盡量避免一次設(shè)置過多的數(shù)據(jù)。
6.不要把data中的任何一項(xiàng)的value設(shè)為undefined滞磺，否則這一項(xiàng)將不能被設(shè)置升薯，可能會有潛在的問題。
常見的setData操作錯誤（官方文檔）
1.頻繁的去setData
在我們分析過的一些案例里击困，部分小程序會非常頻繁（毫秒級）的去setData涎劈，其導(dǎo)致了兩個后果：
- Android 下用戶在滑動時會感覺到卡頓广凸，操作反饋延遲嚴(yán)重，因?yàn)?JS 線程一直在編譯執(zhí)行渲染蛛枚，未能及時將用戶操作事件傳遞到邏輯層谅海，邏輯層亦無法及時將操作處理結(jié)果及時傳遞到視圖層；
- 渲染有出現(xiàn)延時蹦浦，由于 WebView 的 JS 線程一直處于忙碌狀態(tài)扭吁，邏輯層到頁面層的通信耗時上升，視圖層收到的數(shù)據(jù)消息時距離發(fā)出時間已經(jīng)過去了幾百毫秒盲镶，渲染的結(jié)果并不實(shí)時侥袜；
2.每次setData都傳遞大量新數(shù)據(jù)
由setData的底層實(shí)現(xiàn)可知，我們的數(shù)據(jù)傳輸實(shí)際是一次evaluateJavascript腳本過程溉贿，當(dāng)數(shù)據(jù)量過大時會增加腳本的編譯執(zhí)行時間枫吧，占用WebView JS線程。
3.后臺態(tài)頁面進(jìn)行setData
當(dāng)頁面進(jìn)入后臺態(tài)（用戶不可見）宇色，不應(yīng)該繼續(xù)去進(jìn)行setData九杂，后臺態(tài)頁面的渲染用戶是無法感受的，另外后臺態(tài)頁面去setData也會搶占前臺頁面的執(zhí)行代兵。
