微信小程序怎样监听全局变量

这篇文章主要讲解了“微信小程序怎样监听全局变量”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序怎样监听全局变量”吧！

开始吧

首先全局变量里肯定要先有这个 red_heart

globalData: {
    red_heart:0,
  },

然后要在onLaunch方法里给全局变量加一个Proxy代理。

Proxy很好理解，懂得都懂。

this.globalData = new Proxy(this.globalData, {
      get(target, key){
        return target[key];
      },
      set:(target, key, value)=>{
        if(key === "red_heart"){
          this.globalDep.RedHeartDep.notifuy()
        }
        return Reflect.set(target, key, value);
      }
    });

主要看set方法里面有一个this.globalDep.RedHeartDep.notifuy()，这个是啥。这是我在全局创建的一个Dep，简称依赖收集。

代码

globalDep:{
    RedHeartDep:{
      subs:[],
      addSub(watch){
        this.subs.push(watch)
      },
      removeWatch(id){
        this.subs = this.subs.filter((item)=>{
          return item.id != id
        })
      },
      notifuy(){
        setTimeout(()=>{
          this.subs.forEach(w=>w.update())
        },0)
      }
    }
  }

subs是一个数组，用来收集依赖，addSub和removeWatch，notifuy是用来告诉这个东西要去更新了。

那现在还有一个问题，就是这个依赖在哪里添加呢，当然是在用到的地方添加，就是组件创建的时候。

附上组件js全部代码:

const app = getApp()
Component({
  properties: {

  },
  data: {
    red_heart:0
  },
  lifetimes:{
    attached(){
      let watch = {
        id:this.__wxExparserNodeId__,
        update:()=>{
          this.setData({
            red_heart:app.globalData.red_heart
          })
        }
      }
      app.globalDep.RedHeartDep.addSub(watch)
      app.globalData.red_heart = app.globalData.red_heart
    },
    detached(){
      app.globalDep.RedHeartDep.removeWatch(this.__wxExparserNodeId__)
    }
  },
  methods: {
    handClick(){
      app.globalData.red_heart++
      console.log(app.globalData)
    }
  }
})

在attached上添加依赖，在组件销毁的时候也不要忘记把依赖删除，这个id是小程序的一个编译id，直接拿来用了。
害就这样了就做好啦！

总结

感谢各位的阅读，以上就是“微信小程序怎样监听全局变量”的内容了，经过本文的学习后，相信大家对微信小程序怎样监听全局变量这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！