页面中的Data对象

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

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

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

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

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

setData函数

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

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

xxxxxxxxxx
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

温馨提示

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

温馨解释

尽管关于data和setData这种操作很神奇,但其实这也是前端最常用的模版数据绑定方案。数据绑定的过程其实不复杂

1. 解析语法生成 AST
2. 根据 AST 结果生成 DOM
3. 将数据绑定更新至模板

其实这些目前我们并不需要去了解，只需要知道，如何使用即可

实时效果反馈

1. 下列关于setData的注意事项中，哪一项是错误的：

A 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致

B 仅支持设置可 JSON 化的数据

C 单次设置的数据是可以超过1024kB

D 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题

答案

1=>C