简易Proxy监听数据变化

数据变化的前提是变化之前的数据和当前要修改的数据不一致，我们在做监听时候不是单纯的判断数据是否变化，而要对原始数据和当前修改数据进行比对，如果原始值与当前值不匹配，则说明数据发生变更。这种比对的优点在于你可以监听到当前操作的是那条数据，可以对当前数据做关联性操作。

通过Proxy代理数据源，利用set方法监听比对原始值和当前值，每当数据修改，则在set函数内对数据进行比对和其它逻辑操作。

微信小程序响应式数据需要setData实现，Proxy可以修改data中的数据，但是该数据会丢失响应式，所以在Proxy中修改了数据之后，需要对修改的数据setData让其保持响应式。

  /**
   * 监听下拉变化
   * @param {string} key 监听的key
   * @param {any} value 当前修改值
   */
  watchCode(key,value) {
    let { dataForm } = this.data;
    let handle = {
      set(target,key,value){
        if(target[key] != value){
          if(key == 'fiProvinceCode'){
            target.fiCityCode = null
            target.fiAreaCode = null
          }
        } 
        return target[key] = value
      },
    }
    let proxy = new Proxy(dataForm,handle)
    proxy[key] = value
    // 保持数据响应式
    this.setData({dataForm: this.data.dataForm})
  },

上面的案例中，当用户选择省市区之后，再次选择省的时候，如果选择其他省则重置市、区数据，如果还是当前省，则不做任何修改。
此处用到了Proxy的三个特性：
1、Proxy做原始数据与新数据比对
2、Proxy拦截修改操作
3、Proxy是对原始值进行操作，数据源相同

关于Proxy的更详细介绍，请看另一篇文章：Proxy详解