vue 函数配置项watch以及函数 $watch 源码分享

var Watcher = function Watcher(
        vm,
        expOrFn,
        cb,
        options,
        isRenderWatcher
    ) {
        this.vm = vm;
        if (isRenderWatcher) {
            vm._watcher = this;
        }
        vm._watchers.push(this);
        // options
        if (options) {
            this.deep = !!options.deep; //是否观察对象内部值的变化
            this.user = !!options.user;
            this.lazy = !!options.lazy;
            this.sync = !!options.sync;
        } else {
            this.deep = this.user = this.lazy = this.sync = false;
        }
        this.cb = cb; // 观察属性改变时执行的函数
        this.id = ++uid$1; // uid for batching
        this.active = true;
        this.dirty = this.lazy; // for lazy watchers
        this.deps = [];
        this.newDeps = [];
        this.depIds = new _Set();
        this.newDepIds = new _Set();
        this.expression = expOrFn.toString();
        // parse expression for getter
        if (typeof expOrFn === 'function') {
            this.getter = expOrFn;
        } else {
            // 将需要观察的数据：string | Function | Object | Array等进行解析  如：a.b.c, 并返回访问该表达式的函数  
            this.getter = parsePath(expOrFn);  
            if (!this.getter) {
                this.getter = function () { };
                "development" !== 'production' && warn(
                    "Failed watching path: \"" + expOrFn + "\" " +
                    'Watcher only accepts simple dot-delimited paths. ' +
                    'For full control, use a function instead.',
                    vm
                );
            }
        }
        // this.get()将访问需要观察的数据 
        this.value = this.lazy
            ? undefined
            : this.get(); 
    };

    /**
     * Evaluate the getter, and re-collect dependencies.
     */
    Watcher.prototype.get = function get() {
        //this为$watch方法中实例化的watcher
        pushTarget(this);讲this赋给Dep.target并缓存之前的watcher
        var value;
        var vm = this.vm;
        try {
            //访问需要观察的数据,在获取数据的getter中执行dep.depend();将$watch方法中实例化的watcher添加到对应数据下的dep中
            value = this.getter.call(vm, vm); 
        } catch (e) {
            if (this.user) {
                handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
            } else {
                throw e
            }
        } finally {
            // "touch" every property so they are all tracked as
            // dependencies for deep watching
            if (this.deep) {
                traverse(value);
            }
            popTarget(); //将之前的watcher赋给Dep.target
            this.cleanupDeps();
        }
        return value
    };

　观察的对象改变时将执行该方法
  Watcher.prototype.run = function run() { 
        /*....省略部分....*/
　　　　var value = this.get(); //重新获取info的值
             
　　　　var oldValue = this.value; //保存老的值
　　　　this.value = value;
　　　　this.cb.call(this.vm, value, oldValue);  //执行watch的回调

        /*....省略部分....*/
　　};