微信小程序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标识当前检查状态，并且会保证在并发的流程当中，只会有一个脏数据检查流程在运行，以下是执行脏数据检查的流程图：