setData 机制

解释：setData 函数用于将数据，从逻辑层发送到视图层，当开发者调用 setData 后，数据的变化会引起视图层的更新。
参数说明

说明：

• Object 以key: value的形式表示，将this.data中的key对应的值改变成value；
  key可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如array[2].message、a.b.c.d，并且不需要在this.data中预先定义；
• 直接修改this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致；
• 仅支持设置可 JSON 化的数据；
• 请不要把data中任何一项的value设为undefined，否则将会有一些潜在问题出现；
• data 的键名必须遵守 camelCase（驼峰式）的命名规范，不得使用 kebab-case（短横线隔开式）规范。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<!-- index.swan -->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{arr[0].text}}</view>
<button bindtap="changeItemInArr"> Change Arr data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObj"> Change Obj data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

// index.js
Page({
    data: {
        text: 'init data',
        num: 0,
        arr: [{text: 'init data'}],
        obj: {
            text: 'init data'
        }
    },
    changeText() {
        // 不要直接通过 this.data.text = 'changed data' 修改this.data，应该使用 setData
        this.setData({
            text: 'changed data'
        });
    },
    changeNum() {
        // 或者，可以修改 this.data 之后马上用 setData 设置一下修改了的字段
        this.data.num = 1
        this.setData({
            num: this.data.num
        });
    },
    changeItemInArr() {
        // 对于对象或数组字段，可以直接修改一个子字段，这样方式会有带来更好的性能
        this.setData({
            'arr[0].text':'changed data'
        });
    },
    changeItemInObj(){
        this.setData({
            'obj.text': 'changed data'
        });
    },
    addNewField() {
        this.setData({
            'newField.text': 'new data'
        });
    }
});

连续使用 setData 来改变界面的方法也可以达到动画的效果。这样可以任意地改变界面，但通常会产生较大的延迟或卡顿，甚至导致小程序僵死。此时可以通过将页面的 setData 改为自定义组件中的 setData 来提升性能。下面的例子是使用 setData 来实现秒表动画的示例。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<view>
  <stopwatch id="stopwatch" class="stopwatch" />
  <button class="btn" s-if="{{!started}}" bindtap="start">开始计时</button>
  <button class="btn" s-if="{{started}}" bindtap="stop">停止计时</button>
</view>

const app = getApp()
Page({
  data: {
    started: false
  },
  start: function() {
    this.setData({
      started: true
    })
    this.selectComponent('#stopwatch').start()
  },
  stop: function() {
    this.setData({
      started: false
    })
    this.selectComponent('#stopwatch').stop()
  }
})
// 自定义组件中js
Component({
  data: {
    text: '00:00.000'
  },
  methods: {
    start: function() {
      var convertTimeStampToString = function(ts) {
        var ms = String(1000 + Math.floor(ts) % 1000).slice(1)
        var s = String(100 + Math.floor(ts / 1000) % 60).slice(1)
        var m = Math.floor(ts / 60000)
        if (m < 10) m = '0' + m
        return m + ':' + s + '.' + ms
      }
      this.setData({
        text: convertTimeStampToString(0)
      })
      var startTime = Date.now()
      var self = this
      this._interval = setInterval(function() {
        self.setData({
          text: convertTimeStampToString(Date.now() - startTime)
        })
      }, 33)
    },
    stop: function() {
      clearInterval(this._interval)
    }
  }
})

逻辑层在设置数据后可执行函数。

代码示例

• JS

this.setData({
    text: 'Set some data for updating view.'
}, function() {
    // this is setData callback
})