小程序中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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
js获取url参数的使用扩展实例
Dec 29 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 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实现遍历多维数组的方法
2015/11/25 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
PHP 8新特性简介
2020/08/18 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
Python中的并发编程实例
2014/07/07 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python 导入数据及作图的实现
2019/12/03 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
美国手机支架公司:PopSockets
2019/11/27 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
小学科学教学反思
2014/01/26 职场文书
房产授权委托书范本
2014/09/22 职场文书
合作合同协议书
2016/03/21 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技