vue中wath的源码实现

前言

阅读本节，需要理解vue的数据驱动原理。

看这样一段代码

new Vue({data: {msg: 'hello',say: 'hello world',},watch: {msg(newVal) {this.say = newVal + ' world';}}
})

vue的data包括2个属性msg和say，watch中监听msg并更新say的值。

源码实现

1. new Vue

function Vue (options) {if ("development" !== 'production' &&!(this instanceof Vue)) {warn('Vue is a constructor and should be called with the `new` keyword');}this._init(options);
}

new Vue会执行原型上的_init方法， _init方法中hi调用 initState，这个方法会初始化所有状态相关内容

2. initWatch

initStatus会判断如果我们定义了watch则执行initWatch

function initWatch (vm, watch) {for (var key in watch) {var handler = watch[key];if (Array.isArray(handler)) {for (var i = 0; i < handler.length; i++) {createWatcher(vm, key, handler[i]);}} else {　　createWatcher(vm, key, handler);}}
}

这段代码意思是如果watch声明了一个数组，则遍历数组并调用createWatcher，如果不是数组就直接调用createWatcher传递过去。这就证明，watch我们可以声明多个处理函数。

3. createWatcher

createWatcher主要工作是处理传入值，传入不同的值，做不同的兼容处理

function createWatcher (vm,expOrFn,handler,options
) {// 如果handler是对象，则获取handler下面的handler属性当作watch的执行函数if (isPlainObject(handler)) {options = handler;handler = handler.handler;}
// 如果handler是字符串，则获取vue原型上的方法if (typeof handler === 'string') {handler = vm[handler];}
// 调用vue原型上的$watchreturn vm.$watch(expOrFn, handler, options)
}

通过以上我们可以看出，watch定义有很多种类型，比如：

new Vue({watch: {// 字符串test1: 'handleTest',// 对象
        test2: {handler(newVal) {// ....
            }}},methods: {handleTest(newVal) {// ...
        }}
})

4. vm.$watch

Vue.prototype.$watch = function (expOrFn,cb,options
) {var vm = this;if (isPlainObject(cb)) {return createWatcher(vm, expOrFn, cb, options)}options = options || {};options.user = true;// new 一个Watcher实例var watcher = new Watcher(vm, expOrFn, cb, options);if (options.immediate) {cb.call(vm, watcher.value);}return function unwatchFn() {watcher.teardown();}
};

通过以上代码可以看出，watch的创建最终其实是vue内部创建了一个Watcher实例。那么Watcher是vue中很重要的一部分，它是数据驱动不可缺少的一部分。

接下来大概讲一下new Watcher的功能是什么样的。

5. new Watcher

vue在拿到了要监听的属性和属性更新执行的函数后，new Watcher创建一个Watcher。

Watcher是订阅者，它“监听更新行为”并执行更新函数。

为什么双引号？其实不是它在监听。以最初的代码为例更新步骤如下：

1. vue内部new Watcher创建一个Watcher实例

2. Watcher实例创建时会将自己添加到data.msg的Observer中（数据驱动原理知识）

3. 当我们改变msg值时，msg Observer会通知所有被观察者，其中就包括以上Watcher。（数据驱动原理知识）

4. Watcher触发更新并且执行回调，因此执行了我们声明的函数。

完结

watch的实现很简单，这里需要vue的数据驱动原理，由Object.defileProperty、Dep、Watcher几部分实现。不了解的可以先去学习这部分内容。

转载于:https://www.cnblogs.com/xujiazheng/p/11023356.html