小程序中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 相关文章推荐
关于URL中的特殊符号使用介绍
Nov 03 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
微信小程序 可搜索的地址选择实现详解
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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
discuz目录文件资料汇总
2014/12/30 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
php制作简单模版引擎
2016/04/07 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
JS实现留言板功能
2017/06/17 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
Python实现把xml或xsl转换为html格式
2015/04/08 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
Python matplotlib可视化实例解析
2020/06/01 Python
python如何写出表白程序
2020/06/01 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
有个性的自我评价范文
2013/11/15 职场文书
公司承诺书格式
2014/05/21 职场文书
北京英语导游词
2015/02/12 职场文书
Django 实现jwt认证的示例
2021/04/30 Python