小程序中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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
JavaScript验证知识整理
Mar 24 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
BootStrap 动态表单效果
Jun 02 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 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之第八天
2006/10/09 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
js面向对象的写法
2016/02/19 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
奥林匹克运动会口号
2014/06/19 职场文书
主要领导对照检查材料
2014/08/26 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle