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

错误缘由

因为VUE等框架，咱们在逻辑层修改data中的数据后，视图层（页面渲染）会跟着发生变化。固然微信小程序也是实现了相同的功能，那么出现错误的缘由是什么？答案：微信小程序的setData()方法。

常见赋值方式（习惯）致使的错误

Page({
  data: { isShow: false },
  changeStatus(){
    console.log(this.data.isShow);
    this.data.isShow = true;
    console.log(this.data.isShow);
  }
})

效果图

从上边代码和效果图咱们能够看出：一、习惯的赋值方式“=”在逻辑层是起到了做用改变了isShow；二、视图层的并无发生变化。
结论就是常规的“=”赋值方式，在微信小程序中只能改变data中的数据，而不能改变视图层的数据，那么微信小程序怎么解决这个问题的，setData()方法。

Page.prototype.setData()

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

setData函数作了哪些事情？

1. 将数据从逻辑层发送到视图层—-这个恰好解决咱们这里出现的错误，视图层数据的改变
2. 改变对应的 this.data 的值—-同时在逻辑层将data中的值改变

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 ，不然这一项将不被设置并可能遗留一些潜在问题。

其余

个人博客，欢迎交流！

个人CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表