wepy框架的this绑定数据页面不重新渲染更新的解决办法

news/2024/7/20 2:55:16 标签: 小程序

问题分析来源:

    • 数据绑定:

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赋值却不会即时渲染页面呢?

接下来说下脏数据, 首先以上逻辑是基于异步操作中, 在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标识当前检查状态,并且会保证在并发的流程当中,只会有一个脏数据检查流程在运行。

↓↓↓ 个人写的一个公众号,还在完善中 ,欢迎加入↓↓↓ | ᴥ•́ )✧ ↓↓↓

在这里插入图片描述


http://www.niftyadmin.cn/n/1728107.html

相关文章

GBRT原理介绍

GBDT有很多简称,有GBT(Gradient Boosting Tree), GTB(Gradient Tree Boosting ), GBRT(Gradient Boosting Regression Tree), MART(Multiple Additive Regression Tree),…

Windows上python读取grib2文件(不用Linux)

最近在网上下载的NCEP的fnl数据,发现只有grib2文件格式。因为现在处理数据使用的更多的是python,matlab一类的。网上一搜python读取grib文件需要依赖pygrib库,pygrib是欧洲中期天气预报中心(ECMWF)的GRIG API C库的Python接口,通过…

小程序不在合法域名列表中

一:报错截图 二、检查原因 出现这种报错的原因大概有以下几点: (1)、wx.request发起的是 HTTPS 请求 (2)、客户端的 HTTPS TLS 版本为1.2,但 Android 的部分机型还未支持 TLS 1.2&#xff0c…

Flink筛选重要配置参数

1.简单介绍一下flink背景 随着科技的发展,大数据框架处理海量数据越来越流行。有状态流计算将会逐步成为企业作为构建数据平台的架构模式,而目前从社区来看,能够满足的只有Apache Flink。Flink通过实现Goolge Dataflow流式计算模型实现了高吞…

关于小程序开发工具没有上传按钮

先附上图看问题 在实际开发中正常的小程序都有上传按钮,上传到云端,然后测试版本,提交成功后便是正常版,然而今天却碰到上传按钮不见了?拉你? 那么它正常的样子该是怎样的呢? 如下是它该有的…

python读取fnl数据计算200-800km范围内的区域平均、散度、涡度实现grads函数

之前的气象数据如从NCEP中下载的FNL数据一般都是采用Grads处理,但Grads的代码语言比较繁杂,而且一般只用来处理气象数据,所以逐渐都不维护了。作为新生代的python,可以用来解决很多,因此就用python来处理这些问题。 1…

基于vue 动态加载图片src的解决方法

(基于vue 动态加载图片src的解决方法) assets&#xff1a; 在项目编译的过程中会被webpack处理解析为模块依赖&#xff0c;只支持相对路径的形式&#xff0c;如< img src”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径&#xff0c;将有web…

TC气象数据下载包括NCEP的FNL(python脚本)、STI的Best_track、NOAA的SST

TC气象数据的下载&#xff0c;首先需要下载每一年的台风的最佳路径数据集&#xff0c;然后根据最佳路径数据集上的台风的时间点&#xff0c;经纬度去NCEP上的FNL数据查找对应时间点&#xff0c;经纬度的环境变量&#xff0c;最后海温的数据从NOAA上下载。 1.NCEP的FNL资料下载…