《小坑》微信小程序原生开发点击按钮切换显示隐藏无效

在尝试随便写一些简单的代码熟悉微信小程序的代码写法时，发现一个简单的点击按钮切换一个变量的值，然后根据这个值作为wx:if属性的值切换显示隐藏时，虽然变量的值改变了的但是页面并没有变化。

代码如下：

点击

  
  1111
  

// index.js
// 获取应用实例
const app = getApp()
Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar',
    dis:false,
  },
 
  mess(){
      this.dis=this.dis
    console.log(this.dis)
  },

控制台输出是能够正常输出的

但是页面需要显示的内容却没有任何变化

然后查了一下资料才知道，改变变量的值是需要写在this.setData({})里才能够切换显示或隐藏，可以理解为写在this.setData({})中的变量切换之后才会触发页面重新渲染，这和vue的数据发生变化自动更新视图不一样

// index.js
// 获取应用实例
const app = getApp()
Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar',
    dis:false,
  },
 
  mess(){
    this.setData({
      dis:!this.data.dis
    })
    console.log(this.data.dis)
  },

 这样就能够正常点击按钮显示或隐藏了 

在微信小程序开发的官方文档中并没有查到相关的问题，并且与vue的代码写法有挺大的区别。