前言:微信小程序中经常需要用到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的使用和注意事项的更多相关文章

  1. 小程序中的setData的使用

    小程序中的setData setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步). 直接修改 this.data 而不调用 this.setDat ...

  2. 微信小程序中 this.setData is not a function报错

    在微信小程序中我们一般通过以下方式来修改data中的数据: 比如获取小程序缓存: wx.getStorage({ key: 'is_screen', success: function (res) { ...

  3. 微信小程序中this指向作用域问题this.setData is not a function报错

    在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({ index1: e.detail.value }) 比如在函数里面修改数据 bindFaChange1: fun ...

  4. 微信小程序中如何使用setData修改数组或对象中的某一参数

    本人也是刚开始接触微信小程序,在微信小程序中经常会遇到修改数组中某一项的值,比如array[0]或者是对象中object.item的值.这些值在微信小程序中都需要使用一个名为setData的方法,而这 ...

  5. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  6. 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等

    在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...

  7. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  8. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

  9. 微信小程序中使用 <web-view> 内嵌 H5 时,登录问题的处理方法

    在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎 ...

随机推荐

  1. 脚本_监控 HTTP 服务器的状态

    #!bin/bash#功能:监控 HTTP 服务器的状态(测试返回码) #作者:liusingbon#设置变量,url 为你需要检测的目标网站的网址(IP 或域名)url=http://192.168 ...

  2. prometheus 笔记

    前言 prometheus 是监控应用软件类似于nagios. 安装 1.官网下载prometheus-2.2.0.linux-amd64压缩包,解压,执行./prometheus即可.这里重要的是配 ...

  3. demo板 apt-get install stress

    demo 那个网口 没有绑定mac 大电脑绑定了mac 大电脑上网认证系统:http://1.1.1.2 大电脑mac:6C-4B-90-3C-D5-7B 将demo板的mac改为大电脑mac ifc ...

  4. hibernate批量写入

    public int insertChanDaoTaskModel(List<T> t) { // TODO Auto-generated method stub Session sess ...

  5. 网路编程和并发:2.什么是C/S和B/S架构?

    1.C/S 架构 客户端和服务器之间的架构.Client-Server也称客户机服务器模型. 在Client/Server结构的系统中,应用程序分为客户端和服务器两点部分,客户端为每个用户所有,服务器 ...

  6. 【Java】遍历Map<String,String>

    Map<String, String> map = new HashMap<>(); map.put("key1", "value1") ...

  7. 【Linux】grep显示匹配行的上下几行的用法

    打印匹配行的前后5行 grep -5 ‘something’ file 打印匹配行的前后5行 grep -C 5 ‘something’ file 打印匹配行的后5行 grep -A 5 ‘somet ...

  8. Borůvka (Sollin) 算法求 MST 最小生成树

    基本思路: 用定点数组记录每个子树的最近邻居. 对于每一条边进行处理: 如果这条边连成的两个顶点同属于一个集合,则不处理,否则检测这条边连接的两个子树,如果是连接这两个子树的最小边,则更新 (合并). ...

  9. jQuery积累:serialize()、stringify()、toJSON()

    *)表单serialize()序列化,和serializeArray() ##)应用场景 当Ajax或者get请求发送表单中的某一个,或者某几个值到后台时,通过jQuery就能获取到这些值.然后作为A ...

  10. python打印9宫格,25宫格等奇数格,且横竖斜相加和相等

    代码如下: #!/usr/bin/env python3#-*- coding:utf-8 -*-num = int(input('请输入一个奇数:'))# 定义一个长为num的列表high = [[ ...