vm.$watch实现原理

前言

vm.$watch这个api在工作中用得还是比较少，应该多数人都会直接在组件内写watch，而不会直接调用这个api来对数据进行监听，大概看了下其源码，写篇博记录一下。

用法

之前也看过vue文档，但是有一些细节并没有看，现在回过头来发现文档上还是有不少有用的细节没有发现，先放一下$watch的用法
参数：

/*
* @param {string|Function} exOrFn 
* @param {Function|Object} callback
* @param {Object} options
*/
vm.$watch(exOrFn,callback,[options])

返回值 :{Function} unwatch
具体用法：用于监听某个表达式或者是计算属性在实例上的变化，每当变化时触发回调，并可以在回调内获取到新数据以及旧数据。
以前一直以为这个api的第一个参数表示某个字段或者是计算属性，现在才知道也可以传一个函数，监听函数里面用到的依赖，然后在回调函数里能得到函数的新的返回值以及旧的返回值。这一点感觉起来应该和计算属性有点联系。

原理

关于watch的基本原理大体也和vue的响应式原理一样，利用watcher类就能直接实现监听的功能。
代码：

Vue.prototype.$watch = function (
    expOrFn: string | Function,
    cb: any,
    options?: Object
  ): Function {
   
 	// api被调用时获取到vue实例
    const vm: Component = this
    // 判断一下cb是不是对象类型,是对象的话就调用一下createWatcher,
    //这个就像你在watch里面写一个对象一样，createWatcher会拿到你定义的key为handler的函数作为callback函数
    if (isPlainObject(cb)) {
   
      return createWatcher(vm, expOrFn, cb, options)
    }
    options = options || {
   }
    options.user = true
    // 设置监听
    const watcher =