页面中的 Data 对象

data 函数

data 是页面第一次渲染使用的初始数据

页面加载时，data 中的数据将会以 JSON 字符串的形式由逻辑层传至渲染层，因此 data 中的数据必须是可以转成 JSON 的类型：字符串，数字，布尔值，对象，数组

我们在news.js文件中增加 data 对象，并增加相应的数据,显示在页面中

// news.js文件
Page({
  data: {
    hello: "hello",
    num: 10,
    flag: true,
    user: {
      name: "iwen",
      age: 20,
    },
    names: ["iwen", "ime", "frank"],
  },
});

<!-- news.wxml文件 -->
<text>{{ hello }}</text>
<text>{{ num }}</text>
<text>{{ user.name }}</text>
<text>{{ names[1] }}</text>

setData 函数

setData 函数用于将data中的数据进行修改，并发送到视图层

我们在news.js文件中修改data中的数据，我们可以尝试在onLoad中修改num的属性值

Page({
  data: {
    message: "",
    hello: "hello",
    num: 10,
    flag: true,
    user: {
      name: "iwen",
      age: 20,
    },
    names: ["iwen", "ime", "frank"],
  },
  onLoad(options) {
    this.setData({
      num: 20,
    });
  },
});

我们可以观察到页面中的num数字发生了变化为 20

提示

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

---

关于 data 和 setData 这种操作很神奇,其实也是前端最常用的模版数据绑定方案