Vue源码分析--vm.$watch()

Vue源码分析–vm.$watch()

vm.$watch()核心是调用Watcher，如果你对Watcher的使用不熟悉的话，建议先看我的这篇文章 Vue另类解读–基于数据劫持的双向绑定Observer/Watcher/Dep

vm.$watch( expOrFn, callback, [options] )

先说总结

• expOrFn 可以是一个string， 也可以是一个 function
• 如果expOrFn的依赖发生了变化，会重新获取expOrFn这个值，或是重新执行这个方法
• expOrFn 当它是一个string时，可以是$data,$attrs这种被Observer的属性，或是computed这种被特殊处理的复合属性。这个string也可以是一个a.b.c的形式，代表this.a.b.c
• expOrFn 当它是一个方法时，分两种情况。
  • 有返回值，可以看做前面的这种特殊字段的getter；
  • 没返回值，依赖数据变化时，只会重新执行一次这个方法，而不会触发之后的callback回调，例：Vue自身的页面渲染方法就是通过这种方式监控的
• callback 回调，当依赖属性被重新赋值时，重新获取表达式expOrFn的值，如果发生了变化，执行回调cb.call(vm, value, oldValue)
• options.deep，如果expOrFn指向了data上的一个对象，可以通过设置options.deep = true<