小程序中的setData的使用

小程序中的setData

setData 函數用於將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）。

直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致。

單次設置的數據不能超過1024kB，請盡量避免一次設置過多的數據。

示例代碼：

index.wxml

<view>{{name}}</view>
<button bindtap="changeName"> Change name data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

index.js

// demo.js
Page({
    data: {
      name: 'jiqing',  
      num: 0,
      array: [{text: 'init data'}],
      object: {
        text: 'init data'
      }
    },
    changeName:function() {
        this.setData({
            name:'zhangsan'
        })
        console.log("點擊了修改名稱");
        console.log(this.data);
    },
    changeNum: function() {
      this.data.num = 1
      this.setData({
        num: this.data.num
      })
    },
    changeItemInArray: function() {
      // you can use this way to modify a danamic data path
      this.setData({
        'array[0].text':'changed data'
      })
    },
    changeItemInObject: function(){
      this.setData({
        'object.text': 'changed data'
      });
    },
    addNewField: function() {
      this.setData({
        'newField.text': 'new data'
      })
    }
  })

這里的bindtap很有意思，綁定一個點擊事件。

AppData可以方便的查看data數據，以及變化情況。

Wxml可以查看當前的數據情況。

Console可以查看日志，便於調試。

如果開啟了調試模式，在Console中，還可以查看到啟動的步驟。

出發了某個事件都會告訴你。