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

前言：微信小程序中经常需要用到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() {},
})

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

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

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

使用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中设置的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的使用和注意事项,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 微信小程序 setData使用方法及常用错误解决办法

    微信小程序 setData使用方法及常用错误解决办法 最近在弄微信小程序,类似于共享单车用来练练手,基本原理就是小程序发送经纬度给服务器,服务器从数据库中检索经纬度附近的单车传给小程序. 就在这里..没错就是这里,传回来的值是以jsonarray格式传过来的. 我需要将jsonarray进行解析获取经纬度,ID等车辆信息,然后赋值给小程序地图上的mark,一般我的思路时直接用个for循环给每个mark进行赋值然后再Setdata一下就ok, 结果没想到小程序setData()设置数组对象的某个元

  • 微信小程序中this.data与this.setData的区别详解

    微信小程序中this.data与this.setData的区别详解

    一.摘要 小程序中我们会经常使用到this.data与this.setData.其中this.data是用来获取页面data对象的,而this.setData是用来更新界面的.那么他们之间的区别与联系你真的搞懂了吗? Page.prototype.setData() setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值. 注意: 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致. 单次设置的数据不能超过1024kB,请尽量避免一次

  • 浅谈小程序 setData学问多

    为什么不能频繁 setData 先科普下 setData 做的事情: 在数据传输时,逻辑层会执行一次 JSON.stringify 来去除掉 setData 数据中不可传输的部分,之后将数据发送给视图层.同时,逻辑层还会将 setData 所设置的数据字段与 data 合并,使开发者可以用 this.data 读取到变更后的数据. 因此频繁调用,视图会一直更新,阻塞用户交互,引发性能问题. 但频繁调用是常见开发场景,能不能频繁调用的同时,视图延迟更新呢? 参考 Vue,我们能知道,Vue 每次赋

  • 微信小程序使用setData修改数组中单个对象的方法分析

    本文实例讲述了微信小程序使用setData修改数组中单个对象的方法.分享给大家供大家参考,具体如下: 微信小程序已经出来挺久的时间了,之前只是在文档上粗略的看了一下,最近稍得空闲,便利用微信小程序平台写一个练手的项目,顺便学习一下小程序开发,感觉大体跟前端开发基本类似,但是因为是在微信的平台上运行,具体还是要根据小程序的规则来编写代码的,其中还是有部分的内容跟前端中常见的有所不同,于是接下来的博客里,也会顺手记录微信小程序开发过程中的一些坑,帮助后来的小程序开发者少踩一些坑,当然我踩的坑大部分都

  • 微信小程序报错：this.setData is not a function的解决办法

    微信小程序 报错:this.setData is not a function 在page中定义的代码如下,代码会报错:this.setData is not a function <strong> pasteEncryptedText:function()</strong>{ let decryptedPass = this.data.decryptedPassword; if (decryptedPass == '' ){ wx.showToast({ title: '请先输入

  • 微信小程序 setData 对 data数据影响问题

    我是纯前端的,有些时候没有后端接口,只能模拟一些数据来操作.偶然之下,发现了setdata 的一些机制,也有可能不对,请多指教. 先放结论:data的变量通过setdata绑在一起,是同步变化的 准备做一个一键还原界面的按钮事件,如果有后端接口,只需调一下接口,就可以了.问题是没有,于是想弄两个一模一样的数组A,B:A用来渲染界面,一键还原的时候,就把B的值赋给A,从而引起页面重新渲染,达到重置界面的效果. 结果一点反应也没有. data里有模拟的数组  itemleft  itemright,

  • 微信小程序 setData的使用方法详解

    微信小程序 setData的使用方法详解 最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的: Page({ data: { array: [{text: 'init data'}], }, changeItemInArray: function() { this.setData({ 'array[0].text':'changed data' }) } }) 使用了 'array[0].text' : '

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

    前言:微信小程序中经常需要用到this.setData({})把变量值渲染到视图层,那到底什么是this.setData,如何使用?需要注意哪些?作为一个初学者,分享一点我的经验,希望大家批评指正. 介绍:setData函数主要用于将逻辑层数据发送到视图层,同时对应的改变this.data.x的值. 参数:Object 以 key : value 的形式表示,将 this.data 中的 key 对应的值改变成 value. 使用:先给出代码,wxss没有什么意义就不贴了 index.wxml

  • 微信小程序中顶部导航栏的实现代码

    微信小程序中顶部导航栏的实现 实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre

  • 微信小程序中input标签详解及简单实例

    微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对

  • 微信小程序中使元素占满整个屏幕高度实现方法

    微信小程序中使元素占满整个屏幕高度实现方法 在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以. 以前我的做法是用js获取屏幕的高度,然后将其赋值给height, 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口,然后通过setData赋值 但是显然通过js来进行的,

  • 详解微信小程序中的页面代码中的模板的封装

    详解微信小程序中的页面代码中的模板的封装 最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰.那今天所要记录的就是关于微信小程序中的页面的模板封装. 在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义: <templatename="products&

  • Linux 命令查询小程序中的 WePY 云开发实践

    Linux 命令查询小程序中的 WePY 云开发实践

    大家好,今天我来为大家分享一下, Linux 命令查询小程序中的 WePY 云开发实践. Why WePY 首先,先分享一下为什么要选择 WePY ? 在项目开始进行选型的时候,我可选的底层框架有 WePy.MPVue.Taro.MinUI,这些框架都是工程化做得很好的框架,可以帮助小程序项目长期进行维护.其中,Taro 因为采用的是我所不熟悉的 React ,所以从一开始就被排除.MPVue 我看了以后,它更多是给 Web 开发者提供小程序转化工具,而不是给小程序开发者提供类 Vue 工具,所

  • 微信小程序中遇到的iOS兼容性问题小结

    前言 随着小程序的热度不减,更多的电商大佬来时使用小程序,在微信小程序开发中,经常会遇到一些兼容性的问题,下面这篇文章就记录下在微信小程序中遇到的一些兼容性问题,iOS兼容性 1.iOS中input的placeholder属性字体不居中 对placeholder设置line-height及font-size 对input设置高度 2.iOS中滚动卡顿 设置-webkit-overflow-scrolling:touch; 3.微信小程序中解决iOS中new Date() 时间格式不兼容 在实现倒

  • 微信小程序中显示倒计时代码实例

    微信小程序中显示倒计时代码实例

    wxml文件中: <!--倒计时 --> <view class="countDownTimeView countDownAllView" > <view class="voteText countDownTimeText">{{countDownDay}}天</view> <view class="voteText countDownTimeText">{{countDownHour}

  • 微信小程序中悬浮窗功能的实现代码

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

随机推荐