小程序使用watch监听数据变化的方法

来源：网络文章列表2020-06-148

众所周知，Vue中，可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化，那么小程序能不能实现这一点呢？监听器的原理，是将data中需监听的数据写在watch对象中，并给其提供一个方法

• 

• 

• 

• 

众所周知，Vue中，可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化，那么小程序能不能实现这一点呢？

监听器的原理，是将data中需监听的数据写在watch对象中，并给其提供一个方法，当被监听的数据的值改变时，调用该方法。

我们需要用到Javascript中的Object.defineProperty()方法，来手动劫持对象的getter/setter，从而实现给对象赋值时(调用setter)，执行watch对象中相对应的函数，达到监听效果。

Object.defineProperty()方法，会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

这里假定有多个页面需要监听需求，把监听方法写在app.js中，以便全局调用

onLaunch: function () {},// 设置监听器watch: function (ctx, obj) { Object.keys(obj).forEach(key => {  this.observer(ctx.data, key, ctx.data[key], function (value) {   obj[key].call(ctx, value)  }) })},// 监听属性，并执行监听函数observer: function (data, key, val, fn) { Object.defineProperty(data, key, {  configurable: true,  enumerable: true,  get: function () {   return val  },  set: function (newVal) {   if (newVal === val) return   fn && fn(newVal)   val = newVal  }, })}

然后，在需要监听的页面onLoad中，调用watch方法（其中test是要监听的数据，当test在其他方法中通过this.setData赋值后，watch就能监听到test的变化了）

const app = getApp()Page({ data: {  test: 0 }, onLoad: function () {  // 调用监听器，监听数据变化  app.watch(this, {   test: function (newVal) {    console.log(newVal)   }  }) }

以上就是本文的全部内容，希望对大家的学习有所帮助

版权声明

本站部分原创文章，部分文章整理自网络。如有转载的文章侵犯了您的版权，请联系站长删除处理。