如何详细解析小程序中使用watch监听数据变化的技巧？

本文共计725个文字，预计阅读时间需要3分钟。

在Vue中，可以使用`watch`属性来监视和响应实例上的数据变化。那么，对于一个小程序来说，能否实现这一功能呢？

监视器的原理：Vue的监视器本质上是将需要监视的数据写入`watch`对象中，当数据发生变化时，`watch`对象会自动触发相应的回调函数。

实现方式：

1. 在小程序中，可以通过定义一个全局的`watch`对象来实现类似的功能。例如：

javascriptconst watch={ dataKey: function(newValue, oldValue) { // 当dataKey的值发生变化时，执行这里的代码 }};

// 使用watchwatch.dataKey(dataKeyValue);

2. 另一种方式是使用小程序提供的`Page`或`Component`的`data`属性来存储需要监视的数据，并在`onLoad`、`onShow`等生命周期函数中添加相应的监听逻辑。

示例：

javascriptPage({ data: { dataKey: '' }, onLoad: function() { // 监听dataKey的变化 this.setData({ dataKey: '初始值' }, ()=> { console.log('dataKey的初始值是：', this.data.dataKey); }); }, changeDataKey: function() { // 改变dataKey的值 this.setData({ dataKey: '新值' }, ()=> { console.log('dataKey的新值是：', this.data.dataKey); }); }});

通过以上方法，在小程序中可以实现对数据的监视和响应。不过，需要注意的是，小程序的`watch`功能与Vue的`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) } }) }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。