监听小程序的全局对象

对于vue的watch监听，还是比较舒服的一个操作，那么小程序里是没有这个api的，只能我们自己手写一个了

对于监听其实就是监听val的变化，知道vue2.x的小伙伴应该知道vue中的data都是经过Object.中的defineProperty方法来监听

https://www.jianshu.com/p/d8435b278274

对于对象知识点不是很熟悉的可以浏览一下上方链接，看完上篇文章会更容易理解哦

我们步入正题

首先先声明俩个变量，在app.js中声明

  watchCallBack: {},
  watchingKeys: [],
  $watch(key, cb){//监听globalData
    this.watchCallBack = Object.assign({}, this.watchCallBack,{
      [key]: this.watchCallBack[key] || []   //没key则动态增加key值
    });
    this.watchCallBack[key].push(cb);
    if(!this.watchingKeys.find(x => x === key)){  
      const that = this;
      this.watchingKeys.push(key);
      let val = this.globalData[key];
      Object.defineProperty(this.globalData, key, { 
        configurable: true,
        enumerable: true,
        set(value){
          const old = that.globalData[key];
          val = value;
          that.watchCallBack[key].map(func => func(value, old));
        },
        get(){
          return val
        }
      })
    }
  },

可能对于几个this不是很理解哈，因为我是直接在app.js中声明的，毕竟要写一个全局的方法
那么俩变量的作用其实就是监听key值的变化

此时我们编辑一下，试试效果

  globalData: {
    userInfo: null,
    userData:{
      platform : true
    }
  }

首先我们先声明如上的一个对象

  app.$watch('userData', () => {
      console.log(app.globalData.userData)
  })

在需要监听的页面或者关联此对象值的页面触发对其的监听

tr(){
  app.globalData.userData = {
    platform:true
  }
},

那么此时随意触发改变值的方法

此时就会触发此种效果，但是如果我想动态添加不同的对象呢？比如说，我有100个对象，难道我要一个个写进去吗？当然我们可以使用对象合并的方法，我们可以先获取当前的值，然后使用Object.assign对其拼接

使用.操作赋值会显得太low，我们封装一个方法，在app.js中

  setGlobalData(data){//更改全局变量
   Object.keys(data).map(key => {
     var oldGlobalData =  JSON.parse(JSON.stringify(this.globalData[key])) //old值
     var newGlobalData  = Object.assign(oldGlobalData,data[key])
      this.globalData[key] = newGlobalData
   })
 },

这个代码也很容易理解哈，那么此时我们就可以在触发更新的时候调用此方法

  app.setGlobalData({
    userData:{
      platform : false,
      test:true,
      me:123
    }
  })

当然啦，如果页面绑定的变量不多会显得很鸡肋，一旦多了就会发挥很大的用处，这里也只是简单的运用，了解一下原理就好啦

那么番外一下，es6的Proxy比defineProperty更加强大，而且defineProperty无法在vue中动态挂在实例新属性，所以我们挂载DOM后动态新增是无法双向绑定的，但是V3使用Proxy后就可以咯
想了解 Proxy的 点击下方链接

https://www.jianshu.com/p/88dc00dcf260