微信小程序wepy框架的this綁定數據頁面不重新渲染更新的解決辦法(髒數據檢測)

問題來源:

data={

   title: 'i am old tilte'

}

1.在wepy中當單獨設置this.title= 'i am new title',頁面數據沒有更新.

2.如果單獨設置this.setData({title: 'i am new title'})頁面數據更新了,但是切換頁面回來數據還是舊的.

3.如果先設置this.setData({title: 'i am new title'})再設置this.title= 'i am new title',頁面數據更新了,切換頁面也是新的數據

看完上面步驟你會問爲什麼this.setData會更新頁面數據而this.title賦值卻不會即時渲染頁面呢?

原因: 微信小程序中this.data與this.setData的區別詳解

拓展: 微信小程序之 this.data和this.setData{()}區別

---

接下來說下髒數據, 首先以上邏輯是基於異步操作中, 在wepy裏提供了一個叫髒數據檢測的this.$apply();即可解決以上問題不需要第3步的操作,具體看下文(來自wepy官方文檔,非常詳細我就不另起爐竈了)

數據綁定

原生小程序的數據綁定方式

原生小程序通過Page提供的setData方法來綁定數據，如：

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

因爲小程序架構本身原因，頁面渲染層和JS邏輯層分開的，setData操作實際就是JS邏輯層與頁面渲染層之間的通信，那麼如果在同一次運行週期內多次執行setData操作時，那麼通信的次數是一次還是多次呢？這個取決於API本身的設計。

WePY數據綁定方式

WePY使用髒數據檢查對setData進行封裝，在函數運行週期結束時執行髒數據檢查，一來可以不用關心頁面多次setData是否會有性能上的問題，二來可以更加簡潔去修改數據實現綁定，不用重複去寫setData方法。代碼如下：

this.title = 'this is title';

需注意的是，在異步函數中更新數據的時候，必須手動調用$apply方法，纔會觸發髒數據檢查流程的運行。如：

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

WePY髒數據檢查流程

在執行髒數據檢查時，會通過this.$$phase標識當前檢查狀態，並且會保證在併發的流程當中，只會有一個髒數據檢查流程在運行，以下是執行髒數據檢查的流程圖：