前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序----修改data中的数据,页面数据不改变

微信小程序----修改data中的数据,页面数据不改变

作者头像
Rattenking
发布2021-02-01 11:56:37
7K0
发布2021-02-01 11:56:37
举报
文章被收录于专栏:Rattenking

错误原因

由于VUE等框架,我们在逻辑层修改data中的数据后,视图层(页面渲染)会跟着发生变化。当然微信小程序也是实现了相同的功能,那么出现错误的原因是什么?答案:微信小程序的setData()方法。

常见赋值方式(习惯)导致的错误

代码语言:javascript
复制
Page({
  data: {
    isShow: false
  },
  changeStatus(){
    console.log(this.data.isShow);
    this.data.isShow = true;
    console.log(this.data.isShow);
  }
})
效果图
这里写图片描述
这里写图片描述

从上边代码和效果图我们可以看出:1、习惯的赋值方式“=”在逻辑层是起到了作用改变了isShow;2、视图层的并没有发生变化。 结论就是常规的“=”赋值方式,在微信小程序中只能改变data中的数据,而不能改变视图层的数据,那么微信小程序怎么解决这个问题的,setData()方法。

Page.prototype.setData()

setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。

setData函数做了哪些事情?
  1. 将数据从逻辑层发送到视图层----这个刚好解决我们这里出现的错误,视图层数据的改变
  2. 改变对应的 this.data 的值----同时在逻辑层将data中的值改变
代码语言:javascript
复制
Page({
  data: {
    isShow: false,
    isShow1: false
  },
  changeStatus(){
    console.log(this.data.isShow);
    this.data.isShow = true;
    console.log(this.data.isShow);
  },
  changeStatus1() {
    console.log(this.data.isShow);
    this.setData({ isShow:true});
    console.log(this.data.isShow);
  }
})
效果图
这里写图片描述
这里写图片描述

总结:

  1. 在开发程序的时候,我们要遵循别人的规则来开发,不要被习惯所左右;
  2. 熟悉开发文档,减少这种习惯错误(不易被发现);
  3. 微信小程序开发中,为了减少data和视图层数据表现不一致,全部采用setData方法修改值。

setData函数注意事项

  1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
  2. 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
  3. 请不要把 data 中任何一项的 value 设为 undefined ,否则这一项将不被设置并可能遗留一些潜在问题。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/12/26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 错误原因
  • 常见赋值方式(习惯)导致的错误
    • 效果图
    • Page.prototype.setData()
      • setData函数做了哪些事情?
        • 效果图
        • 总结:
        • setData函数注意事项
        相关产品与服务
        数据库一体机 TData
        数据库一体机 TData 是融合了高性能计算、热插拔闪存、Infiniband 网络、RDMA 远程直接存取数据的数据库解决方案,为用户提供高可用、易扩展、高性能的数据库服务,适用于 OLAP、 OLTP 以及混合负载等各种应用场景下的极限性能需求,支持 Oracle、SQL Server、MySQL 和 PostgreSQL 等各种主流数据库。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档