书接上回

上一篇 我们通过 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 没有缓存支持