微信小程序實現watch監聽

Vue.js裏有watch監聽機制，很適合“一處改變，多處影響”的場景，在開發小程序的過程中，自然也會遇到這樣的場景，下面介紹如何在小程序中實現watch監聽。

1. 定義watch.js

在根目錄（miniprogram）下創建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鉤子裏，執行setWatch（使用import關鍵詞從watch.js引入），並傳入當前頁面實例this，完成初始化。

添加watch對象，內部寫入需要被監聽的字段以及執行函數：

// index.js

import { setWatch } from '../../watch.js'

Page({
  data: { ... },
  watch: {
    // 需要監聽的字段
    foo(val) {
      console.log('foo變化了，變化後的值是', val)
      ... // 具體操作
    }
  },
  // watch初始化，傳入當前頁面實例this
  onLoad() {
    setWatch(this)
  }
})