在微信小程序中經(jīng)常會使用到setData函數(shù)把變量渲染到視圖層，那么什么是setData呢？如何使用？注意事項有些什么？下面我們就來詳細了解一下！

正文

1. setData是小程序開發(fā)中使用最頻繁的接口，也是最容易引發(fā)性能問題的接口。
2. setData函數(shù)用于將數(shù)據(jù)從邏輯層渲染到視圖層（異步），同時改變對應(yīng)的this.data的值（同步）。

實例1：簡單實現(xiàn)點擊修改變量值

test：{{test}}</text>
點擊改變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);
    }
})

效果：

實例解析：

1. 代碼很容易理解，點擊按鈕test變量的值被改變了，通過setData函數(shù)渲染到了前端展示。
2. 另外我在this.setDta前后分別打印出了this.data.test的值，看看最終打印結(jié)果：

這里就說明了setData函數(shù)渲染到視圖層后，會同步修改this.data.test的值。

實例2：動態(tài)修改數(shù)組指定下標的某個參數(shù)值（類似購物車）

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) {
	// 被點擊的view
	let index = e.currentTarget.dataset.index;
	// 根據(jù)index找到test對應(yīng)索引中對應(yīng)要修改的參數(shù)
	let revise = "test[" + index + "].txt";
	this.setData({
	    [revise]: "呃，我被人給點了?。?！"
	})
    }
})

效果

實例解析：

1. 其實這個就是根據(jù)index找到test對應(yīng)索引中對應(yīng)要修改的參數(shù)，然后進行修改并渲染到頁面上；
2. 該功能購物車選中狀態(tài)、數(shù)量更改都可以使用到；
3. 此方法比使用循環(huán)尋找更改然后再渲染，更方便、性能更好！

注意事項

1. 如果Page對象的data中沒有定義該key，則setData自動創(chuàng)建；如有則修改data中原變量的值。
2. 直接修改this.data，而不調(diào)用this.setData()，是無法改變當前頁面的狀態(tài)的，會導(dǎo)致數(shù)據(jù)不一致。
3. 使用this.setData({})時，注意this指向問題。 僅支持可以JSON化的數(shù)據(jù)。
4. 單次設(shè)置的數(shù)據(jù)不能超過1024KB，盡量避免一次設(shè)置過多的數(shù)據(jù)。
5. 不要把data中的任何一項的value設(shè)為undefined，否則這一項將不能被設(shè)置，可能會有潛在的問題。

常見的setData操作錯誤（官方文檔）

1.頻繁的去setData

在我們分析過的一些案例里，部分小程序會非常頻繁（毫秒級）的去setData，其導(dǎo)致了兩個后果：

1. Android 下用戶在滑動時會感覺到卡頓，操作反饋延遲嚴重，因為 JS線程一直在編譯執(zhí)行渲染，未能及時將用戶操作事件傳遞到邏輯層，邏輯層亦無法及時將操作處理結(jié)果及時傳遞到視圖層；
2. 渲染有出現(xiàn)延時，由于WebView 的 JS 線程一直處于忙碌狀態(tài)，邏輯層到頁面層的通信耗時上升，視圖層收到的數(shù)據(jù)消息時距離發(fā)出時間已經(jīng)過去了幾百毫秒，渲染的結(jié)果并不實時；

2.每次setData都傳遞大量新數(shù)據(jù)

由setData的底層實現(xiàn)可知，我們的數(shù)據(jù)傳輸實際是一次evaluateJavascript腳本過程，當數(shù)據(jù)量過大時會增加腳本的編譯執(zhí)行時間，占用WebView JS線程。

3.后臺態(tài)頁面進行setData

當頁面進入后臺態(tài)（用戶不可見），不應(yīng)該繼續(xù)去進行setData，后臺態(tài)頁面的渲染用戶是無法感受的，另外后臺態(tài)頁面去setData也會搶占前臺頁面的執(zhí)行。