每个人都可以，
拥有SSL证书

做业务的时候总要监听数据变化，比如搜索框输入了啥、某个状态切没切换。小程序组件和页面这两块的处理方式不太一样，组件有现成的 observers，页面就得自己动手写个 watch。

组件这头其实官方文档写得挺清楚，我主要提几个用得多的场景。

基础用法不复杂，给 observers 里挂几个字段就行。监听 counter 这种顶层属性直接用名字，嵌套的比如 user.age 就用点语法。代码大概长这样：

Component({
  data: {
    counter: 0,
    user: { name: '张三', age: 20 },
    items: ['A', 'B']
  },
  observers: {
    'counter': function(newVal) {
      console.log('计数器变化:', newVal);
    },
    'user.age': function(age) {
      console.log('年龄变化:', age);
    }
  }
})

再说几个平时容易忽略的。

有时候不确定对象的子属性有哪些，或者太深了不想一层层写，可以用通配符 user.**，只要 user 底下任何一个字段变了都会触发，回调里拿到的是整个 user 对象。需要监听数组长度的时候写 items.length 就行，注意不是整个数组变了才触发，长度一改就触发了。如果好几个字段都要触发同一个逻辑，可以用 '[a,b]': fn 这种多字段写法，不用把同样的函数写两遍。

Component({
  observers: {
    'user.**': function(user) {
      console.log('用户对象变化:', user);
    },
    'items.length': function(len) {
      console.log('数组长度变化:', len);
    }
  }
})

组件这套 observers 挺好用的，但是只能在自定义组件里用，页面没这玩意儿。

以前我做页面需要监听数据的时候挺头疼，后来发现可以用 Object.defineProperty 给 data 的属性挂 setter，变相实现一个 watch。

核心思路就是在 setWatch 里把 page.watch 定义的字段全遍历一遍，一个个劫持。还要考虑深度监听的情况，比如监听的是一个对象，只劫持顶层属性的话，改子属性是不触发的，所以得递归进去把所有层级的属性都劫持了。代码我是这么写的：

function observe(obj, key, watchFn, deep) {
  let oldVal = obj[key];
  if (deep && oldVal && typeof oldVal === 'object') {
    Object.keys(oldVal).forEach(k => {
      observe(oldVal, k, watchFn, deep);
    });
  }
  Object.defineProperty(obj, key, {
    set: function(value) {
      if (value === oldVal) return;
      const old = oldVal;
      oldVal = value;
      watchFn.call(this, value, old);
    },
    get: function() {
      return oldVal;
    }
  });
}

export function setWatch(page) {
  Object.keys(page.watch || {}).forEach(key => {
    const config = page.watch[key];
    observe(
      page.data, 
      key,
      typeof config === 'function' ? config : config.handler,
      config.deep || false
    );
  });
}

页面里用的时候引入 setWatch，在 onLoad 里调用一下就行。

watch 的配置可以传一个函数，也可以传一个对象，对象里指定 handler 和 deep。比如搜索框的输入就直接传函数，监听对象里的某个字段就得用对象写法并打开 deep。

import { setWatch } from '../../utils/watch';

Page({
  data: {
    searchText: '',
    userInfo: { name: '李四', vip: false }
  },
  watch: {
    searchText(val) {
      console.log('搜索内容变化:', val);
    },
    'userInfo.vip': {
      handler(val) {
        console.log('VIP状态变化:', val);
      },
      deep: true
    }
  },
  onLoad() {
    setWatch(this);
  }
})

这里其实容易踩坑。

一个是深度监听的开销，如果对象很大或者嵌套很深，递归劫持会多走不少代码，线上数据量一大可能就能感觉到卡了，非必要别开 deep。还有一个很常见的问题是，在 watch 的回调里又去改了被监听的那个字段，一改又触发 watch，直接死循环，调试的时候发现页面卡死或者日志刷屏，多半是这个原因。

还有几个细节。

组件 observers 是在 setData 之后同步触发的，代码里如果同一个事件循环里调了好几次 setData，每次都会走一遍 observers，所以逻辑尽量轻量。

搜索框这种高频输入的场景，watch 回调里直接做查询或者复杂计算会有点浪费，一般配合防抖，大概 300ms 到 500ms 延迟一下，体验会好很多。

页面 watch 这个方案我记得是在基础库 2.9.0 以上跑起来的，不过现在大部分用户的微信版本应该都比较新了，一般不用担心。但如果是还在维护的老项目，还是先看下基础库版本兼容再说。