当前位置:首页 > 小程序实现类似vue的watch方法,监听globalData异步变化

小程序实现类似vue的watch方法,监听globalData异步变化

发布于 2020-04-07 阅读 2224 次 小程序 Javascript

有时候我们可能会在app.js异步的获取到一些数据,但是想在其他page里面使用,这个时候需要等待异步更新globaData,然后我就想小程序有没有类似vue的计算属性或者watch,查了文档发现没有,然后想到vue利用object 的set 和 get来监听对象的值的改变,所以自己写了一个简单的监听

app.js里面的代码

  1. watch: function (method) {
  2. var obj = this.globalData.bags;
  3. Object.defineProperty(obj, "user", {
  4. set: function (value) {
  5. this._user = value; //注意这里用到一个_user做中转
  6. method(value);
  7. },
  8. get: function () {
  9. // 可以在这里打印一些东西,然后在其他界面调用getApp().globalData.name的时候,这里就会执行。
  10. return this._user
  11. }
  12. })
  13. },
  14. globalData: {
  15. userInfo: null,
  16. token: '',
  17. bags: {
  18. user: ''
  19. }
  20. },

注意哈:set 和 get 里面要用一个中转变量,不能用本身
错误示范:
Object.defineProperty(obj, “user”, {
set: function (value) {
this.user = value; //注意这里用到一个_user做中转
method(value);
},
get: function () {
// 可以在这里打印一些东西,然后在其他界面调用getApp().globalData.name的时候,这里就会执行。
return this.user
}
})
这样写会便死循环,因为set里面给同一个属性赋值相当于又做set这样循环做set就死循环了

page/index/index.js的代码

  1. onLoad: function () {
  2. let self = this;
  3. app.watch(function(){
  4. self.setData({ user: app.globalData.bags.user });
  5. })
  6. }