this.data与this.setData

article/2025/8/27 2:48:51

https://www.jianshu.com/p/4fe2af286f7a
this.setData({})用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。用this.data而不用this.setData({})会造成页面内容不更新的问题。
例如下面的代码addPerson:函数中,如果写成this.data.name = ‘保存’,那么点击’新增参保人’,按钮的名称是不会更改成"保存"的。因为微信框架里面说了用this.data的形式,数据会变,但是视图并不会变。也就是说,其实’新增参保人’已经变成了’保存’,只是视图没更新而已。用this.setData({})的形式不仅会改变数据,而且还会改变视图。
还有非常重要的一点,如果页面需要显示动态的数据的话,那么我们必须要把数据更新到data中对应的变量中。例1:更新array数组中第0个元素msg这个key对应的value。``例2:更新name的值。 msg和name都在data中,都是变量。

一、摘要

  小程序中我们会经常使用到this.data与this.setData。其中this.data是用来获取页面data对象的,而this.setData是用来更新界面的。那么他们之间的区别与联系你真的搞懂了吗?

二、正文

  this.data可以获取页面data对象,但是它返回的对象到底是新的对象还是仅仅只是一个引用呐。这个很关键,在日常开发中很可能因为不知道或者是自己的疏忽导致bug,而且很难排查原因。带着这个疑问我们来做一下试验。由于时间比较紧,博主就不单独写demo了,项目中可能有大量其它代码干扰我们分析,还请见谅。

    var data = this.data.swiperItems[currentSwiper];

  这行代码使用this.data获取了我需要的对象,并且赋值给data变量,下面分别打印data和this.data的相应对象。

  可以看到这两个对象的内容是一致的。下面我将在data变量中添加一个test字段,然后再看这两者的打印结果。注意我并不会对this.data操作。

  可以看到他们都发生了变换,所以这是浅拷贝,也就是两个变量指向了同一片存储区域,无论通过哪个变量操作这片存储区域,相应的两个变量得出的值都会变换。为了继续证明我们的猜想是正确的,下面我只操作this.data而不操作data。

  跟我们预想的一样,即使我先赋值后加字段,data得出的结果也是被修改了的。

  可能有人会问,那为啥用使用this.setData后才能看到界面的变换呢?至于this.setData我们可以看成是更新界面,并且貌似this.setData里面又托管了一个this.data的副本。因为在我改变this.data后立马去执行

    this.setData({});

  界面并不会更新,这就说明我们需要更新this.setData管理的那个数据对象才能更新界面,而界面真正加载的数据也是来自那里。想要知道具体怎么实现的,那就要去看源代码了。

三、结论

  总结一下就是:this.data与this.setData的关系就是this.setData里面存储的是this.data的副本,而界面是从this.setData里面托管的this.data的副本取数据的。所以我们更改this.data并不会直接更新界面,因为这个时候的this.setData里面的副本还是没有更新前的。


http://chatgpt.dhexx.cn/article/xQaGqwZC.shtml

相关文章

setData的工作原理和注意事项

https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html 解决问题: setData 操作太频繁解决方案 很多页面都会有tab选项卡,有时候太频繁去点击…

遇到问题2:onLoad中使用setData无效

1.在微信开发者工具中更改data中的数据是使用setData这个方法,但是今天我碰到在onload周期中使用setData无效的问题(我在onLoad中调用了wx.getSetting方法,setData写在wx.getSetting中),查了很久也没解决,后面发现主要是&#xff…

js中怎么获取某个属性的值_小程序中 setData 详解

前言 在小程序中各个页面之间是相互独立的,一个页面分为渲染层(视图层 webview),逻辑层(JavaScript),系统层(底层),在架构上,WebView和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道,换而言之,若要将逻辑层中的data的数据渲染到页面中,他们之间是无法直接通信的…

小程序 setData 动态 key 的写法

setData 是小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口。 本篇文章主要说一说 setData 的正确使用 和 动态 key 的使用。 目录 Page.prototype.setData(Object data, Function callback) #1 什么时候应该使用 setData 函数? #2 常用的…

小程序setData函数小探究

官方文档可以知道 setData函数改变Page的data是同步的,会异步通知视图层data的改变,视图层收到通知后进行渲染。即官方文档里生命周期的Send Data箭头 callback分析 先上代码: Page({data: {theData: 1},onLoad: function(options) {conso…

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

微信小程序中this.setData is not a function报错问题 新手在编写小程序时经常会遇到的一种错误。 新手在编写小程序时经常会遇到的一种错误。 在小程序中,通常我们用setData修改数据,用于函数时不会报错。 eg. setData function(e){this.setData({mob…

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

前言:微信小程序中经常需要用到this.setData({})把变量值渲染到视图层,那到底什么是this.setData,如何使用?需要注意哪些?作为一个初学者,分享一点我的经验,希望大家批评指正。 介绍&#xff1a…

微信小程序setData()方法的使用

官方解释: setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。 自己通俗的理解就是给数据复制用的, 结合一个demo说下setdata的使用 不如点击确定按钮把当前的值显示的布局中…

android setdata方法,Android intent.setData方法

1 从文本框中获取内容 EditText mobileText (EditText)findViewById(R.id.mobile); String mobile mobileText.getText().toString(); 2 打电话的权限 在功能清单中加入代码 编写代码实现Button的点击相应 Intent intent new Intent(); intent.setAction("android.inte…

微信小程序中 setData 详解

虽互不曾谋面,但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号(ID:itclanCoder) 如果不知道如何操作 点击这里,标星不迷路 ━━━━━━ ━━━━━━…

微信小程序————setData()方法的使用和注意事项

微信小程序setData()使用: ##Page.prototype.setData(Object data, Function callback) setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。 参数说明: …

微信小程序setData注意事项,使用方法

1..微信小程序开发中,为了减少data和视图层数据表现不一致,全部采用setData方法修改值。 setData函数注意事项 1..直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。 2..单次设罟的数据不能超过1024kB&…

layui自定义table中的templet

1.效果图如下 2.后端返回数据如下 3.实现代码如下 {field: "triggerPara",title: "触发参数",templet: function (d) {let text"" , type;for(let i 0 ; i < d.triggerPara.length ; i ){if(d.triggerPara[i].type 0){type 门禁}else i…

layui table 更新行触发templet重新渲染

更新方法 obj.update({// 这里的字段必须要在 table.render.cols.filed 有定义&#xff0c;否则无法触发表格渲染// key 决定是否重新渲染某一列&#xff0c;value 由 templet 里的语句进行逻辑处理canView: !data.canView }); , {field: canView, title: 操作, toolbar: #te…

layui2.4.5版本解决table使用templet导出数据问题

在使用 table 自带的导出功能时对使用了templet的数据导出为空 使用较高的版本可以解决此类问题&#xff1a;https://gitee.com/layui/layui/issues/I40UJ9 但是此文章中的项目比较老以及页面功能都比较多升级layui版本可能会影响比较大&#xff0c;所以就对layui源码进行微调…

layui表格使用自定义模板templet

前言 在前文 layuispringboot实现表格增删改查 中&#xff0c;我们展示了如何使用layui将数据库数据渲染到前端表格中&#xff0c;但现在问题来了&#xff0c;如果不加特殊处理&#xff0c;前端表格直接显示数据库存储信息是不合适的&#xff0c;例如数据库有一个类型字段&…

layui 动态表格 templet模板函数

1&#xff0c;需求说明 关于动态标题栏的相关知识跳转链接&#xff1a;layui 静态 动态复杂多表头 2&#xff0c;尝试的用法 var chenbenkemuList${chenbenkemuList};var columnAry[]for (var i 0; i < chenbenkemuList.length; i) {var onechenbenkemu chenbenkemuList[…

layui:templet

在使用layui-table的时候,由于它每次都是动态刷新,无法保存我们做的一些页面上元素的修改。 我希望我设置完默认地址之后,下次访问应该是和这次一样变成了灰色的。 这个时候要用到templet,官方文档中的{{d}}就是table获取回来的data,直接做判断,设置样式即可! <

LayUi 之 templet

templet是什么东西&#xff1f; 我们都知道LayUi中有模板&#xff0c;就是把我们需要展示的东西放在模板中展示&#xff0c;你就比如我们想要展示一些数据&#xff0c;但是这些数据不是我们想要的数据或者不是我们想要的样子&#xff0c;这个时候我们可以通过模板前端更改一下…