微信小程序，实现vue-watch_v小程序里面watch

微信小程序，实现vue-watch

• 监听数据有三种情况
  1. 监听某个属性
  2. 监听my.name…类似
  3. 监听多层对象 deep
     call用法

 function setWatcher (page) {
	//page 小程序page对象（this）
  let obj = page.data,
    watch = page.watch;

  Object.keys(watch).forEach(w => {

    let newData = obj;
    
    //定义初始值，deep监听返回初始对象
    let initialObj = JSON.parse(JSON.stringify(obj))[w]

    //监听类似my.name
    let keys = w.split('.');
    //实现原理，监听最后一个 **.** 后面得值
    //例如 my.name 则监听name
    let watchKey = keys[keys.length - 1];
    
     //获取需要监听得上一层对象
    for (let i = 0; i < keys.length - 1; i++) {
      newData = newData[keys[i]];
    }
    
    // 监听回调函数（deep 则handler）
    let watchFun = watch[w]['handler'] || watch[w];

	//是否为深度监听
    let deep = watch[w]['deep'];
	
	//obj[w] 深度监听修改后对象
    observe(newData, watchKey, watchFun, deep, page, initialObj, obj[w])
  })
}

function observe (obj, key, watchFun, deep, page, initialObj, nowObj) {
  let val = obj[key];
	
	//判断是否为深度监听，是则递归设置监听
  if (val && typeof val === 'object' && deep) {
    Object.keys(val).forEach(k => {
      observe(val, k, watchFun, deep, page, initialObj, nowObj)
    })
  }

  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: true,
    get: function () {
      return val
    },
    set: function (nval) {
      if (deep) {
      	// 深度监听返回新对象，原始对象
      	// call使用为了回调函数内this能访问page内对象
        watchFun.call(page, nowObj, initialObj);
      } else {
        watchFun.call(page, nval, val);
      }
      val = nval;
    }
  })
}

module.exports = setWatcher;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

• 小程序onLoad设置监听

//引入
var watcher = require('../../utils/watch.js');
onLoad() {
	//设置监听
	watcher(this);
}
1
2
3
4
5
6

• watch实现

watch: {
    'username': function (newValue) {
      console.log(newValue, this); // username改变时，调用该方法输出新值。
    },
    'userInfo': {
      handler(newValue, value){
        console.log(newValue, value, 'deep'); // userInfo改变时，调用该方法输出新值。
      },
      deep: true
    }
  },
1
2
3
4
5
6
7
8
9
10
11