微信小程序Page监听数据变化不能使用observers

众所周知，微信小程序的数据监听器observers只能在自定义组件中使用，如果想要在页面中实现类似的功能，就只有通过其他的方法。其一就是通过模拟vue的watch来监听数据变化。

那么Page中应该怎样监听呢？

1.创建watch.js

新建一个 watch.js 文件存放监听器的逻辑函数，代码如下：

// watch.js

const 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 钩子里执行 setWatcher (使用 import 从watch.js引入)，并传入当前页面实例 this，完成初始化。添加 watch 对象，内部写入需要被监听的字段及执行函数：

// index.js

import { setWatcher } from '../../utils/watch.js'

Page({
  data: { ... },
  watch: {
    // foo 是需要监听的字段
    foo(val) {
      console.log('foo变化了，变化后的值是', val)
      ... // 具体操作
    }
  },
  // watch初始化，传入当前页面实例this
  onLoad() {
    setWatcher(this)
  }
})

tips：如果有多个页面都需要使用watch监听，可以直接在app.js中引入该文件，注册成全局函数，这样就不用每个文件都去引入watch.js了，只需要在使用的页面onLoad的时候调用一次该函数，就能愉快的使用watch了。

使用实例：

1.创建wtach.js，这里我在utils下面创建的

2.在需要监听的Page页面引入

3.在onLoad里面初始化

 

4.进行监听

这里我监听的data中的investoCode字段，并进行具体操作