小程序數(shù)據(jù)綁定方式

小程序通過(guò)Page提供的setData方法去綁定數(shù)據(jù)，如：

this.setData({title: 'this is title'});

因?yàn)樾〕绦蚣軜?gòu)本身原因，頁(yè)面渲染層和JS邏輯層分開(kāi)的，setData操作實(shí)際就是JS邏輯層與頁(yè)面渲染層之間的通信，那么如果在同一次運(yùn)行周期內(nèi)多次執(zhí)行setData操作時(shí)，那么通信的次數(shù)是一次還是多次呢？這個(gè)取決于API本身的設(shè)計(jì)。

wepy數(shù)據(jù)綁定方式

wepy使用臟數(shù)據(jù)檢查對(duì)setData進(jìn)行封裝，在函數(shù)運(yùn)行周期結(jié)束時(shí)執(zhí)行臟數(shù)據(jù)檢查，一來(lái)可以不用關(guān)心頁(yè)面多次setData是否會(huì)有性能上的問(wèn)題，二來(lái)可以更加簡(jiǎn)潔去修改數(shù)據(jù)實(shí)現(xiàn)綁定，不用重復(fù)去寫(xiě)setData方法。代碼如下：

this.title = 'this is title';

但需注意，在函數(shù)運(yùn)行周期之外的函數(shù)里去修改數(shù)據(jù)需要手動(dòng)調(diào)用$apply方法。如：

setTimeout(() => {
    this.title = 'this is title';
    this.$apply();
}, 3000);

wepy臟數(shù)據(jù)檢查流程

在執(zhí)行臟數(shù)據(jù)檢查是，會(huì)通過(guò)this.$$phase標(biāo)識(shí)當(dāng)前檢查狀態(tài)，并且會(huì)保證在并發(fā)的流程當(dāng)中，只會(huì)有一個(gè)臟數(shù)據(jù)檢查流程在運(yùn)行，以下是執(zhí)行臟數(shù)據(jù)檢查的流程圖：