微信小程序如何模拟vue的watch功能

模拟vue的watch功能需要用到Object.keys以及Object.defineProperty。

笔者技术有限,只能模拟非对象形式的属性,供初学者参考。 

代码简单易懂,无深度,适合开发半年左右的前端工程师阅读

上代码

const app = getApp();

Page({

  data: {
    showPopup: false, //是否显示弹窗

  },
  setWatch: function() {
    console.log(this.watch) //拿到watch对象
    console.log(Object.keys(this.watch)) //看看watch对象里有什么
    let watch = this.watch
    let that = this
    Object.keys(watch).forEach((w_i) => { //循环遍历
      let data = this.data //拿到data
      let w_fn = this.watch[w_i] //获取watch对象里的函数
//Object.defineProperty() 
//方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
//example
//Object.defineProperty(obj, prop, descriptor)
// obj 要在其上定义属性的对象

// prop 要定义或修改的属性的名称

// descriptor 将被定义或修改的属性描述符
// descriptor 含有的属性

// configurable 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。

// enumerable
// 当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。

// get
//一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。
默认为 undefined。

//set
//一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。

      Object.defineProperty(data, w_i, { // data是page对象下面的data w_i 是watch和data
        configurable: true,              //共有的属性
        enumerable: true,
        set: function(v) {
          this._v = v     // v 是最新的值,w_i是键名, that是page对象
          watch[w_i].call(this.watch, v, w_i, that) //当设置这个值时,触发watch变量的
        },                                                              //w_i函数
        get: function() {
          return this._v
          //这里return的变量,是开发者拿到该属性时看到的变量
        }
      })
    })
  },
  onLoad: function(options) {
    this.setWatch() //添加 watch功能
  },
  watch: {
    showPopup: function(newval, key, self) {
    }
  }

})