模拟vue里面的watch监听

创建一个js封装一个类

class Observer {
  constructor(data, callback) {
    this.data = data;
    this.filterObj(data, callback);
  }
  static isObject(obj) {
    if (Object.prototype.toString.call(obj) === "[object Object]") {
      return true;
    }
    return false;

  }
  filterObj(data, callback) {
    if (!Observer.isObject(data)) return;
    for (const key in data) {
      // 过滤原型链上的属性。
      if (data.hasOwnProperty(key)) {
        const value = data[key];
        if (Observer.isObject(data[key])) {
          new Observer(data[key]);
        };
        this.watch(key, value, callback);
      }
    }
  }
  watch(k, v, callback) {
    Object.defineProperty(this.data, k, {
      enumerable: true,
      configurable: true,
      get: function () {
        // console.log(`${k}，被访问。`)
        return v;
      },
      set: function (newV) {
        // console.log(`${k}，属性值发生变化。`)
        // console.log(`新的值为：${JSON.stringify(newV)}。`)
        if (Observer.isObject(newV)) {
          new Observer(newV);
        }
        v = newV;
        callback && callback()
      },
    })
  }
}
export default Observer;

在页面直接引用

import Observer from '../../utils/observer.js'
onload里面监听最新的数据，新数据发生变化，就赋值给本页面的变量去保存监听它
  onLoad: function (options) {
    new Observer(APP.PLAY, () => {
      this.setData({
        play: APP.PLAY
      })
    })
  },