1.9 watch选项合并

在使用Vue进行开发时，我们有时需要自定义侦听器来响应数据的变化，当需要在数据变化时执行异步或者开销较大的操作时，watch往往是高效的。对于 watch 选项的合并处理，它类似于生命周期钩子，只要父选项有相同的观测字段，则和子的选项合并为数组，在监测字段改变时同时执行父类选项的监听代码。处理方式和生命钩子选项的区别在于，生命周期钩子选项必须是函数，而watch选项最终在合并的数组中可以是包含选项的对象，也可以是对应的回调函数，或者方法名。

  1. strats.watch = function (parentVal,childVal,vm,key) {
  2.     //火狐浏览器在Object的原型上拥有watch方法，这里对这一现象做了兼容
  3.     // var nativeWatch = ({}).watch;
  4.     if (parentVal === nativeWatch) { parentVal = undefined; }
  5.     if (childVal === nativeWatch) { childVal = undefined; }
  6.     // 没有子，则默认用父选项
  7.     if (!childVal) { return Object.create(parentVal || null) }
  8.     {
  9.       // 保证watch选项是一个对象
  10.       assertObjectType(key, childVal, vm);
  11.     }
  12.     // 没有父则直接用子选项
  13.     if (!parentVal) { return childVal }
  14.     var ret = {};
  15.     extend(ret, parentVal);
  16.     for (var key$1 in childVal) {
  17.       var parent = ret[key$1];
  18.       var child = childVal[key$1];
  19.       // 父的选项先转换成数组
  20.       if (parent && !Array.isArray(parent)) {
  21.         parent = [parent];
  22.       }
  23.       ret[key$1] = parent
  24.         ? parent.concat(child)
  25.         : Array.isArray(child) ? child : [child];
  26.     }
  27.     return ret
  28.   };

下面结合具体的例子看合并结果：

  1. var Parent = Vue.extend({
  2.   watch: {
  3.     'test': function() {
  4.       console.log('parent change')
  5.     }
  6.   }
  7. })
  8. var Child = Parent.extend({
  9.   watch: {
  10.     'test': {
  11.       handler: function() {
  12.         console.log('child change')
  13.       }
  14.     }
  15.   },
  16.   data() {
  17.     return {
  18.       test: 1
  19.     }
  20.   }
  21. })
  22. var vm = new Child().$mount('#app');
  23. vm.test = 2;
  24. // 输出结果
  25. parent change
  26. child change

简单总结一下：对于watch选项的合并，最终和父类选项合并成数组，并且数组的选项成员，可以是回调函数，选项对象，或者函数名。