简单的了解一下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中WXML模板和WXSS样式工作在渲染层而JS脚本工作在逻辑层，渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本；一个小程序会有多个页面，所以渲染层存在多个Webview进程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。
对小程序中setData(）的理解 - 图1
Webview进程和JsCore进程是两个相对独立的模块，所以说数据是不能够直接通信的，所以说逻辑层的数据（也就是从后台获取的数据）要想渲染在页面上往往需要一个中间的角色-系统层（底层）。
我们都知道视图层的数据来源于逻辑层 data,而视图图层若想要改变逻辑层 data 的数据,需要借助setData这个方法去触发,以达到更新视图层的数据,具体的工作过程是怎么样的?

setData（）是什么？

作用：setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）
这句话包含的意思：

  • setData是微信小程序提供的一个内置的接口
  • 从后台获取的数据经过系统层（Native）后，系统层把数据转发到渲染层这个过程是异步的
  • 直接修改this.data的值是而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致

    setData的两个参数

    Page.prototype.setData(Object data, Function callback）从官方的解释中可以得知，setData（）是挂载在当前页面实例Page上的，所以在Page下面的任何一个方法都可以用setData（）方法，它接受两个参数：
    捕获.PNG
    示例代码： ```javascript Page({ data: { text: ‘init data’, num: 0, array: [{text: ‘init data’}], object: {
    1. text: 'init data'
    } }, changeText: function() { // this.data.text = ‘changed data’ // 不要直接修改 this.data // 应该使用 setData this.setData({
    1. text: 'changed data'
    }) }, changeNum: function() { // 或者，可以修改 this.data 之后马上用 setData 设置一下修改了的字段 this.data.num = 1 this.setData({
    1. num: this.data.num
    }) }, changeItemInArray: function() { // 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好 this.setData({
    1. 'array[0].text':'changed data'
    }) }, changeItemInObject: function(){ this.setData({
    1. 'object.text': 'changed data'
    }); }, addNewField: function() { this.setData({
    1. 'newField.text': 'new data'
    }) } })

```