小程序中this.setData的使用和注意事项


Posted in Javascript onAugust 28, 2019

前言:微信小程序中经常需要用到this.setData({})把变量值渲染到视图层,那到底什么是this.setData,如何使用?需要注意哪些?作为一个初学者,分享一点我的经验,希望大家批评指正。

介绍:setData函数主要用于将逻辑层数据发送到视图层,同时对应的改变this.data.x的值。

参数:Object 以 key : value 的形式表示,将 this.data 中的 key 对应的值改变成 value。

使用:先给出代码,wxss没有什么意义就不贴了

index.wxml

<view class="numview">test01======={{test01}}</view>
 <view class="numview">test02======={{test02}}</view>
 <button bindtap="testfun">测试</button>

index.js

Page({
 data: {
  test01: 1,
  test02: 2
 },
 testfun: function() {
  var that = this;
  if (this.data.test01 == 1) {
   that.setData({
    test02:8
   })
   console.log(this.data.test02)
  }
 },
 onLoad: function() {},
})

此时经过编译后模拟器的显示:

 小程序中this.setData的使用和注意事项

这里都容易理解,当点击了button按钮后,触发点击事件执行testfun函数,将test02设置为8,如图:

小程序中this.setData的使用和注意事项

通过this.data.test02=8这种方式直接赋值可以吗,答案是不可以,看下面:

小程序中this.setData的使用和注意事项

使用this.data.test02=10的结果不会渲染到前台页面中显示,但是后台已经改变,会造成前后台数据不一致。

我又想到是不是可以先通过this.data.test02=10赋值,再通过this.setData渲染呢?

onLoad: function() {
  this.data.test02 = 10;
  this.setData({
   test02
  })
 }

编译报错:test02 is not defined;

为什么呢?再进行一项测试:

onLoad: function() {
   this.data.test02 = 10;
   var test03 = 20;
   this.setData({
    test03
   })
   console.log(this.data.test03)
  }

编译后显示:

小程序中this.setData的使用和注意事项

发现了什么?我个人觉得是这样的:

一、this.setData中设置的key如果只有key没有value,则从所在函数内找这个变量,找到之后渲染到前台指定位置。

 (1)如果Page对象的data中没有定义该key,则setData自动创建,这个可以从打印结果中发现(this.data.test03,data中没有定义)。

 (2)如果Page对象的data中已经定义该变量,则修改data中原变量的值。

二、this.setData中设置的key如果有key有value,直接渲染到前台并修改原data中的数据。

注意事项:

上面演示的使用说明也算是注意事项吧,理解透彻才能运用自如,避免数据混乱。

另外给出官方的setData建议:https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html

常见的 setData 操作错误

1. 频繁的去 setData

在我们分析过的一些案例里,部分小程序会非常频繁(毫秒级)的去setData,其导致了两个后果:

Android 下用户在滑动时会感觉到卡顿,操作反馈延迟严重,因为 JS 线程一直在编译执行渲染,未能及时将用户操作事件传递到逻辑层,逻辑层亦无法及时将操作处理结果及时传递到视图层;

渲染有出现延时,由于 WebView 的 JS 线程一直处于忙碌状态,逻辑层到页面层的通信耗时上升,视图层收到的数据消息时距离发出时间已经过去了几百毫秒,渲染的结果并不实时;

2. 每次 setData 都传递大量新数据

由setData的底层实现可知,我们的数据传输实际是一次 evaluateJavascript 脚本过程,当数据量过大时会增加脚本的编译执行时间,占用 WebView JS 线程,

3. 后台态页面进行 setData

当页面进入后台态(用户不可见),不应该继续去进行setData,后台态页面的渲染用户是无法感受的,另外后台态页面去setData也会抢占前台页面的执行。

总结

以上所述是小编给大家介绍的小程序中this.setData的使用和注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 #Javascript
vue实现标签云效果的方法详解
Aug 28 #Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 #Javascript
TypeScript类型声明书写详解
Aug 28 #Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 #Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 #Javascript
Vue的编码技巧与规范使用详解
Aug 28 #Javascript
You might like
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
js实现动态时钟
2020/03/12 Javascript
vue实现购物车列表
2020/06/30 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
gearman的安装启动及python API使用实例
2014/07/08 Python
Python简单读取json文件功能示例
2017/11/30 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python如何实现代码检查
2019/06/28 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
预备党员自我评价范文
2015/03/04 职场文书
会议通知格式范文
2015/04/15 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers