【Vue原理】Watch - 源码版
【Vue原理】Watch - 源码版
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】
如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧
今天继续探索 Watch 源码，废话不多说了
带着我的几个疑问开始
1、什么时候初始化
2、怎么确定监听哪些值
3、深度监听怎么回事
4、怎么触发我的函数这些问题的答案会掺杂在源码的解析中，我发现这几篇的写作套路都差不多.....
也可以看查一下我的白话版
什么时候初始化
首先，从这个问题开始我们今天的探索之旅，请看源码
function Vue(){
... 其他处理
initState(this)
...解析模板，生成DOM 插入页面
}
function initState(vm) {
...处理 data，props，computed 等数据
if (opts.watch) {
initWatch(this, vm.$options.watch);
}
}没错，当你调用 Vue 创建实例过程中，会去处理各种选项，其中包括处理 watch
initWatch
处理 watch的方法是 initWatch，下面就呈上 源码
function initWatch(vm, watch) {
for (var key in watch) {
var watchOpt = watch[key];
createWatcher(vm, key, handler);
}
}然后这段源码并没有做什么惊天地泣鬼神的事情，只是简简单单的一个遍历，然后每个watch 都使用一个叫什么 createWatcher 的东西去处理
这个函数到底是干嘛的？暗藏着什么秘密，欢迎来到我们今晚的 《走近科学》《源码解析》
createWatcher 来看看他的真身
function createWatcher(
// expOrFn 是 key，handler 可能是对象
vm, expOrFn, handler,opts
) {
// 监听属性的值是一个对象，包含handler，deep，immediate
if (typeof handler ==="object") {
opts= handler
handler = handler.handler
}
// 回调函数是一个字符串，从 vm 获取
if (typeof handler === 'string') {
handler = vm[handler]
}
// expOrFn 是 key，options 是watch 的全部选项
vm.$watch(expOrFn, handler, opts)
}大概就这样吧
1、获取到监听回调
2、调用 vm.$watch
1、获取监听回调
首先，你传入的 watch 配置可能是这三种（还有更多，差不多，不解释，累死我）
如果配置是个对象，就取handler 字段
如果配置是函数，那么直接就是 监听回调
如果配置是字符串，从实例上获取函数
2、调用 vm.$watch
看着这个方法，简直 mmp，还有完没完，我从一个函数进入一个函数，又从这个函数进入到另一个函数，迷宫啊这是.....
显然你不用急，下面还有更多......
好吧，还是先看源码
Vue.prototype.$watch = function(
// expOrFn 是 监听的 key，cb 是监听回调，opts 是所有选项
expOrFn, cb, opts
){
// expOrFn 是 监听的 key，cb 是监听的回调，opts 是 监听的所有选项
var watcher = new Watcher(this, expOrFn, cb, opts);
// 设定了立即执行，所以马上执行回调
if (opts.immediate) {
cb.call(this, watcher.value);
}
};看完了吧？这么短，你们肯定看得懂的啦，就两件事
1、判断是否立即执行监听回调
如果你设置了 immediate 的话，表示不用等我数据变化，初始化时马上执行一遍，执行的代码就是直接调用 回调，绑定上下文，传入监听值
2、每个 watch 配发 watcher
代码从这里开始变得沉重，各位观众，喝口水，恰口饭，屏息观看操作
看看 watcher 的源码
“watcher 的源码之前的文章也讲过很多，但是对于每种选项的涉及的细节是不一样的，所以每次都放上来，但是只放跟本内容相关的部分代码，其他的省去以便我们快速理解”
var Watcher = function (vm, key, cb, opt) {
this.vm = vm;
this.deep = opt.deep;
this.cb = cb;
// 这里省略处理 xx.xx.xx 这种较复杂的key
this.getter = function(obj) {
return obj[key]
};
// this.get 作用就是执行 this.getter函数
this.value = this.get();
};再看看，新建 watcher 的时候 ，传入了什么
1、监听的 key
2、监听回调 （Watch 中的cb）
3、监听配置的options
这里会涉及到三个问题，现在来解释
1、怎么对设置的 key 进行监听？
我们要先对 Watch 中的 this.getter 的函数进行理解，他的本质是为了获取对象的key值
然后 getter 是在 watcher.get 中执行的，看下 get 源码
// 对本问题进行了独家简单化的源码
Watcher.prototype.get = function() {
var value = this.getter(this.vm);
return value
};你能看到，Watch 在结尾会立即执行一次 watcher.get，其中便会执行 getter，便会根据你监听的key，去实例上读取并返回，存放在 watcher.value 上
看到了吗，从实例上读取属性，这句话。
首先，watch 初始化之前，data 应该初始化完毕了，每个 data 数据都已经是响应式的
使用例子来说明一下
当 watch.getter 执行，而读取了 vm.name 的时候，name的依赖收集器就会收集到 watch-watcher
于是 name 变化的时候，会可以通知到 watch，监听就成功了
2、如何进行深度监听？
首先，深度监听，是你设置了 deep 的时候，如下
然后，观察上面的 Watch 源码，deep 会保存在watcher 中，以便后用
话锋一转
上一问题说过，在 新建 watcher 的时候，会马上执行一个 get，上个问题的 get 源码简化很多，把 处理深度监听的部分去掉了，这里露出来了
Watcher.prototype.get = function() {
Dep.target= this
var value = this.getter(this.vm)
if (this.deep) traverse(value)
Dep.target= null
return value
};没错，处理深度监听只有一条语句！
if (this.deep) traverse(value)value 是 getter 从实例上读取监听key 得到的值，没有疑问
但是 traverse 是何方神圣？come on 让我们深入....
function traverse(val) {
var i, keys;
// 数组逐个遍历
if (Array.isArray(val)) {
i = val.length;
// val[i] 就是读取值了，然后值的对象就能收集到 watch-watcher
while (i--) {
traverse(val[i])
}
}
else {
keys = Object.keys(val);
i = keys.length;
// val[keys[i]] 就是读取值了，然后值的对象就能收集到 watch-watcher
while (i--) {
traverse(val[keys[i]])
}
}
}你看它这段代码长，其实是个纸老虎，做的就是一个事情，不断递归深入读取对象
他的想法是这样的
因为读取，就可以让这个属性收集到 watch-watcher 的原则
就算是深层级的对象，其中的每个属性也都是响应式的，每个属性都有自己的依赖收集器
通过不断深入的读取每个属性，这样每个属性就都可以收集到 watch-watcher 了
这样不管对象内多深的属性变化，都会通知到 watch-watcher
于是这样就完成了深度监听
3、监听值变化，如何触发监听函数？
通过上面的问题，我们已经了解了大部分了
监听的数据变化的时候，就能通知 watch-watcher 更新，所谓通知更新，就是手动调用 watch.update
速度看下 watcher.update 源码
Watcher.prototype.update= function() {
var value = this.get();
if (this.deep) {
var oldValue = this.value;
this.value = value;
// cb 是监听回调
this.cb.call(this.vm, value, oldValue);
}
};很简单嘛，就是读取一遍值，然后保存新值，接着 调用 监听回调，并传入新值和 旧值
ok，就这样
