English
资源说明：Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：监听属性 watch。
虽然watch的滥用会导致性能不佳，但在一些情况下我们还是需要watch，使得代码更加简洁、逻辑更加清晰(其实就是嫌麻烦…)。
小程序实现 类似vue 一样的watch 监听数据
将方法注册到app.js 中也可以使用高级一点的写法
使用装饰器模式将小程序page 重写挂在到生命周期函数上或者挂在页面this 上每次就不需要重新在调用初始化一次。本文对装饰器模式不做介绍这是个思路。等待下次实现
setWatcher(page) {
let data = page.data; // 获取pa
在微信小程序中，为了实现类似Vue的`watch`功能，我们可以创建一个自定义的方法来监听数据的变化。Vue的`watch`允许我们在数据发生变化时执行特定的回调函数，这对于处理复杂的数据响应逻辑非常有用。虽然过度使用`watch`可能导致性能问题，但有时候它能帮助我们编写更简洁和清晰的代码。
在微信小程序中，由于没有内置的`watch`功能，我们需要自己模拟这个过程。一种方法是将监听方法注册到`app.js`中，这样可以在全局范围内使用。另外，可以利用装饰器模式来重写`Page`，将其绑定到生命周期函数或页面`this`上，避免重复初始化。不过，这里不深入讨论装饰器模式，而是提供一种基本的实现方式。
我们创建一个`setWatcher`函数，它接收一个页面实例作为参数。在函数内部，获取页面的数据`data`和`watch`对象。然后，遍历`watch`对象，对每个需要监听的属性进行处理。属性名可能包含点号（`.`），所以我们用`split('.')`将其拆分为数组，便于后续操作。
接着，我们使用`this.observe`函数来监听数据。`observe`函数递归地处理对象的每一个属性，如果设置了`deep`属性并且当前值是对象类型，那么会进行深度监听，即当对象内部的属性发生改变时也会触发回调。
在`Object.defineProperty`中，我们创建了一个访问器属性，当数据变化时，`set`函数会被调用。这里，我们将新值和旧值传入`watchFun`，并确保在调用时`this`指向正确，以便访问`this.data`。同时，如果设置了深度监听，我们会重新调用`observe`函数来监听新值。
在页面的`onLoad`生命周期函数中，我们调用`app.setWatcher(this)`来注册监听。同时，我们可以在`watch`对象中定义要监听的属性和对应的回调函数，其中`handler`是回调函数，`deep`表示是否开启深度监听。
例如：
```javascript
onLoad: function () {
app.setWatcher(this);
setTimeout(() => {
this.setData({ name: "kangbosodoa" });
}, 2000);
},
watch: {
name: {
handler: function (newValue, oldValue) {
console.log(this);
console.log(newValue, oldValue, "变化了");
},
deep: true,
},
type: {
handler: function (newValue) {
console.log(newValue, "属性发生变化");
},
deep: true, // 是否深度监听
},
},
```
在这个例子中，当`name`或`type`的值改变时，相应的回调函数会被调用。`deep: true`意味着如果`name`或`type`是对象，它们的内部变化也会被监听。
通过这种方式，我们可以模拟Vue的`watch`功能，在微信小程序中实现数据变化时的监听和响应。这不仅可以帮助我们更好地组织代码，还可以在数据更新时执行复杂的业务逻辑。然而，需要注意的是，频繁的监听和数据变更可能会增加性能开销，因此在实际使用中要谨慎评估和优化。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
