阅读(4999) (11)

wepy 数据绑定

2017-06-17 15:54:38 更新

小程序数据绑定方式

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