书接上回
上一篇 我们通过 Vue 源码了解并总结了，Vue 初始化时需要进行哪些处理，其中遇到响应式的相关内容时选择了略读，没有进行深入了解，那么本篇就开始深入解读 Vue 响应式.
深入源码
响应式入口
根据上一篇 vue 初始化都做了什么事？ 的内容，可以快速定位到初始化时响应式的入口为 src > core > instance > init.js 中的 initState(vm) 方法，接下来就具体看看这个方法里面的具体实现.
initState(vm) 方法
这个方法具体定义的位置为 src > core > instance > state.js.
可以看到这里面需要对 props、methods、data、computed、watch 等选项进行单独处理，分别对应的是 initProps()、initMethods()、initData()、initComputed()、initWatch() 这个几个方法，显然想要了解更多，必须要去这些方法中一探究竟了.
initProps() 方法
当存在 props 选项时，就会通过这个方法对 props 进行处理, 这个方法具体定义的位置为 src > core > instance > state.js.
这个方法主要做的事：
- 遍历
props上的所有key
- 将遍历到的
key保存到vm.$options._propKeys上，主要目的就是为了缓存prop键，以便将来的props更新可以使用Array进行迭代，而不是对动态对象进行键枚举 - 限制
props中的key，不允许使用保留属性key，即判断哪些key不可以用作components的props属性 - 对
props进行响应式处理，这里后面统一解读defineReactive()方法 - 将
props通过proxy(vm, _props, key)方法，将对应的key代理到vm._props属性上，即this.propsKey等价于this._props.propskey，这里会存在一个优化，只会代理原来不存在的key，即新添加的key
initMethods() 方法
当存在 methods 选项时，就会通过这个方法对 methods 进行处理, 这个方法具体定义的位置为 src > core > instance > state.js.
这个方法主要做的事：
- 获取
props的配置，然后进行判重处理，即methods中的key不能和props中的key重复
- 可以很容易看出来
propsKey和methodsKey的优先级为：propsKey>methodsKey
- 将
methods中的所有方法赋值到vm实例上，并将函数内部的this绑定到vm上，即可以直接通过this.methodsKey访问 
initData() 方法
当存在 data 选项时，就会通过这个方法对 data 进行处理，这个方法具体定义的位置为 src > core > instance > state.js.
这个方法主要做的事：
- 获取
data选项，判断data是否为函数
- 如果是函数，绑定内部
this指向vm，并将vm作为参数传递，通过call调用函数取得返回值，并且保证data最终是个对象 - 不是函数 且
data不存在，就赋值为{}
- 遍历
data选项中的所有key，进行判重处理，data中的属性与props和methods中的属性不能重复
- 优先级为：
propsKey > dataKey > mthodsKey，这一点其实可以从warn中的提示看出来
- 对
data进行observer处理
- 当存在
__ob__属性时，证明已经进行了observer处理，直接返回__ob__对象 - 当不存在
__ob__属性且需要对value进行observer处理时，通new Observer(value)进行处理，后面会对这个Observer类进行解读 
initComputed() 方法
当存在 computed 选项时，就会通过这个方法对 computed 进行处理，这个方法具体定义的位置为 src > core > instance > state.js.
如果对 computed 的用法不够了解，可以参考 官方文档
这个方法主要做的事：
- 创建一个完全空的对象赋值给
vm._computedWatchers，方便后面用于存储每个computedKey对应的watcher实例 - 遍历
computed中的所有key
- 判断当前
computed上对应属性值的类型，目的是为了获取当前key对应的getter函数。如果是函数及代表其就是getter函数；如果不是函数，默认传入的是包含get函数的配置对象，于是获取get函数赋值给getter - 为每个
key通过new Watcher()实例化一个watcher并保存到vm._computedWatchers中，并且computedWatcherOptions选项中配置了{ lazy: true }即懒执行 - 对
key进行判重处理:computed的属性不能与data、 props、 methods中的属性重复，优先级为：prop > data > methods > computed - 如果当前的
key不在vm实例上，就调用defineComputed()方法，将computed中的key代理到vm上
defineComputed() 方法中的 createComputedGetter() 方法
- 拿到
watcher实例，当且仅当watcher存在才需要进行其他处理 - 其中
watcher.dirty为true表示getter函数中的依赖发生变化，需要通过执行watcher.evaluate()计算得到最新的值，执行之后又把watcher.dirty赋值为false - 如果
Dep.target存在，需要进行依赖收集
computed 和 methods 的区别？computed 在一次渲染当中，只会执行一次，后续访问不会执行，除非 getter 函数中的响应式数据发生变更，即此时会调用 watcher.update 并把 watcher.dirty 变成 true，此时就需要重新执行 getter 函数返回最新值. 值得注意的是，computed 是通过 watcher 实现的，它缓存的原理其实是依赖于 watcher.dirty.
methods 只要调用了函数，函数就会重新执行，不论函数被使用多少次.
initWatch() 方法
当存在 watch 选项时，就会通过这个方法对 watch 进行处理，这个方法具体定义的位置为 src > core > instance > state.js.
如果对 watch 的用法不够了解，可以参考 官方文档
这个方法主要做的事：
- 遍历
watch配置项，获取每个handler，这里的handler = watch[key]
- 判断
handler是否为数组，是数组就循环调用createWatcher()方法，如果不是数组就直接调用createWatcher()方法
createWatcher()方法中也会判断handler的类型，
- 如果是普通对象那么就意味着是配置对象，此时把
handler赋值给options，并且从handler配置中取出名为handler的函数赋值给handler配置对象，最后都传给createWatcher() - 如果是字符串，则代表此时
handler的值是对应vm实例上methods中对应的方法，此时取得methods上的这个方法，并赋值给handler本身 - 最后调用
vm.$watch，即Vue.prototype.$watch
Vue.prototype.$watch( expOrFn, cb, options?) 方法
首先要确定一点，定义在原型上的方法，可以在组件中直接通过 this.$watch() 的方式直接调用，因此，在这方法里面还是要处理参数问题.
- 判断
cb类型
- 如果是普通对象，此时代表用户是通过
this.$watch()方式进行配置的，于是就需要通过createWatcher()方法进行处理，处理之后又会在createWatcher()中调用this.$watch()，此时，就能保证后续cb一定是个函数 - 如果
cb已经是一个班函数，那么就开始处理对应内容. 首先通过options.user = true标记当前是一个用户watcher，接着实例化一个watcher；然后，判断options.immediate是否为true，如果是true则会在invokeWithErrorHandling()方法中通过apply或call调用cd - 最后，向外返回
unwatchFn方法，内部通过调用watcher.teardown()解除监听
computed 和 watch 的异同？相同点：
从源码中很容易知道，computed 和 watch 都是通过 Watcher 去实现的，并且都是一个 key 对应一个 watcher 实例.
不同点：
computed默认懒执行且不可配置的，因为在源码中通过computedWatcherOptions = { lazy: true }定义的，而watch可通过配置项中的immediate的值来执行computed中一般执行同步同理，因为要往外实时返回一个计算值，而watch支持异步处理computed中的返回值具有缓存的特性，主要是通过watcher.dirty来实现的，而watch没有缓存支持
