数据响应

Vue中最为开发者们所津津乐道的特性就是其数据响应特性，Vue中的数据响应特性主要包含：响应数据赋值、watch观察数据和computed计算属性，该能力让我们能够以非常直观简洁的方式建立起数据与数据之间/数据与视图之间的绑定依赖关系，大幅提升复杂webapp的开发体验和开发效率。

受此启发，Mpx通过增强的方式在小程序开发中提供了完整的数据响应特性，在2.5.x版本前，Mpx通过mobx实现内部和核心数据响应，在2.5.x版本之后，从数据响应性能、完整度和运行时包体积等多方面角度考虑，我们借鉴了Vue2的设计，在内部自行维护了一套精简高效的数据响应系统，全面移除了对于mobx的依赖。

在新的响应系统中，所有的使用方法和使用限制都和Vue保持一致，关于数据响应的原理和使用限制可以参考这里 (opens new window)

下面是一个小程序数据响应的简单示例：

<template>
  <view>
    <view>Num: {{num}}</view>
    <view>Minus num: {{mnum}}</view>
    <view>Num plus: {{nump}}</view>
    <view>{{info.name}}</view>
    <view wx:if="{{info.age}}">{{info.age}}</view>
  </view>
</template>

<script>
  import { createPage } from '@mpxjs/core'

  createPage({
    // data中定义的数据会在初始化时进行数据响应处理
    data: {
      num: 1,
      info: {
        name: 'test'
      }
    },
    // 配置中直接定义watch
    watch: {
      num (val) {
        console.log(val)
      }
    },
    // 定义计算属性，模板中可以直接访问
    computed: {
      mnum () {
        return -this.num
      },
      nump: {
        get () {
          return this.num + 1
        },
        // 支持计算属性的setter
        set (val) {
          this.num = val - 1
        }
      }
    },
    onReady () {
      // 使用实例方法定义watch，可以传递追踪函数更加灵活
      this.$watch(() => {
        return this.nump - this.mnum
      }, (val) => {
        console.log(val)
      })
      // 每隔一秒进行一次更新，相关watcher会被触发，视图也会发生更新
      setInterval(() => {
        this.num++
      }, 1000)
      // 使用$set新增响应属性，视图同样能够得到更新
      setTimeout(() => {
        this.$set(this.info, 'age', 23)
      }, 1000)
    }
  })
</script>