Vue.js中有watch监控机制，非常适合“一变多影响”的场景。在开发小程序的过程中，自然会遇到这样的场景。下面介绍如何在小程序中实现手表监控。1.定义watch.js在根目录（小程序）下创建watch.js，代码如下：//watch.jsconstobserve=(obj,key,watchFun,deep,page)=>{letoldVal=obj[key]//如果监听对象是object类型并指定deep（深度监听）if(oldVal!==null&&typeofoldVal==='object'&&deep){//递归子集，执行observe()inturnObject.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)returnwatchFun.call(page,value,oldVal)oldVal=value},get(){returnoldVal}})}exportconstsetWatcher=(page)=>{//页面中的data字段constdata=page.data//页面中的watch字段constwatch=page.watch//对于手表中列出的每个字段（Fieldsthatneedtobemonitored)Executeobserve()Object.keys(watch).forEach(key=>{lettargetData=dataconsttargetKey=key//支持深度监控，使用deep时需要配合handler使用，否则直接写函数constwatchFun=watch[key].handler||watch[key]constdeep=watch[key].deepobserve(targetData,targetKey,watchFun,deep,page)})}在使用监听机制的页面的js文件（如index.js）的onLoadhook中，执行setWatch（使用import关键字从watch.js导入），传入当前页面实例this完成初始化，添加watch对象。内部写需要被监控的字段和执行函数：//index.jsimport{setWatch}from'../../watch.js'Page({data:{...},watch:{//需要的字段待监控foo(val){console.log('foo发生了变化，变化的值为',val)...//具体操作}},//监听初始化，传入当前页面实例thisonLoad(){setWatch(这个)}})
