Vue.js里有watch监听机制，很适宜“一处扭转，多处影响”的场景，在开发小程序的过程中，天然也会遇到这样的场景，上面介绍如何在小程序中实现watch监听。
1. 定义watch.js
在根目录（miniprogram）下创立watch.js，代码如下：
// watch.jsconst observe = (obj, key, watchFun, deep, page) => { let oldVal = obj[key] // 如果监听对象是object类型并且指定deep（深度监听） if (oldVal !== null && typeof oldVal === 'object' && deep) { // 递归子集，顺次执行observe() Object.keys(oldVal).forEach(item => { observe(oldVal, item, watchFun, deep, page) }) } // 应用Object.defineProperty()劫持数据的写操作，在监听对象扭转后执行传入的watchFun Object.defineProperty(obj, key, { configurable: true, enumerable: true, set(value) { if (value === oldVal) return watchFun.call(page, value, oldVal) oldVal = value }, get() { return oldVal } })}export const setWatcher = (page) => { // 页面里的data字段 const data = page.data // 页面里的watch字段 const watch = page.watch // 对watch里列举的每一个字段（须要监听的字段）执行observe() Object.keys(watch).forEach(key => { let targetData = data const targetKey = key // 反对deep深度监听，应用deep时须要配合handler应用，否则间接编写函数 const watchFun = watch[key].handler || watch[key] const deep = watch[key].deep observe(targetData, targetKey, watchFun, deep, page) })}2. 应用办法
在须要应用监听机制页面的js文件（如index.js）onLoad钩子里，执行setWatch（应用import关键词从watch.js引入），并传入以后页面实例this，实现初始化。
增加watch对象，外部写入须要被监听的字段以及执行函数：
// index.jsimport { setWatch } from '../../watch.js'Page({ data: { ... }, watch: { // 须要监听的字段 foo(val) { console.log('foo变动了，变动后的值是', val) ... // 具体操作 } }, // watch初始化，传入以后页面实例this onLoad() { setWatch(this) }})