observe() 方法

在上面的篇幅中，由于其他的内容点也不少，所以没有在上面对响应式进行深入解读，本质上在上面的所有 props、data、methods 等处理完成之后都会进行 observer 处理，下面就对其进行解读.

入口位置

具体定义位置为：src > core > observer > index.js.

这个方法要做的事很简单：

• 判断 value 是否是对象或者 value 为 VNode 实例，就不进行处理
• 当 value 上存在 __ob__ 属性时，证明已经进行了observer 处理，直接返回 __ob__ 对象
• 当不存在 __ob__ 属性且需要对 value 进行 observer，就通过 new Observer() 进行实例化 __ob__ 并返回

Observer 类

类的具体定义位置为：src > core > observer > index.js.

• 往 observe 实例上添加一个 dep 属性，其值为 new Dep()
• 通过 def(value, '__ob__', this) 为当前的 value 使用 Object.defineProperty 定义 __ob__ 属性，即标记当前 value 已进行过 observe 处理
• 判断当前接收的 value 类型

• 如果是数组，处理数组的响应式
• 如果是对象，通过 this.walk(value) 处理对象的响应式，其内部就是遍历每个 key 调用 defineReactive(obj, keys[i])

defineReactive() 方法

• 实例化一个 dep 实例，仍然是一个 key 对应一个 dep
• 获取 obj[key] 的属性描述符 property，判断是否支持对 property 属性描述符是否可配置，不支持就直接结束
• 通过 property 获取 getter 和 setter 并且，判断入参个数赋予 val 值
• 判断是否需要深度监测，如果需要就继续执行 observe(val) 方法，然后获取到子 __ob__ 即获取 childOb
• 对 obj[key] 的 get 访问 和 set 设置 进行拦截

• 在 get 拦截 中，如果 Dep.target 存在，通过 dep.depend() 进行 依赖双向收集，将 dep 添加到 watcher 中，也将 watcher 添加到 dep 中。如果 childOb 存在对其（嵌套对象）也进行依赖收集，此时还会判断当前 value 是否为数组，如果是数组需要执行 dependArray(value) 方法，使用 循环 + 递归 的方式处理 数组中选项为对象 的情况，对其进行依赖收集，因为前面的所有处理都没有办法处理这种情况，因为数组不能像通过属性 getter 那样进行拦截
• 在 set 拦截 中，首先获取修改之前的旧值，若新值和旧值相等就不进行处理，同时也会判断当前 value 是否是只读的，即存在 getter 不存在 setter 就是只读，此时也不做处理；接着就是设置新值，然后对新值通过 observe(newVal) 进行响应式处理；最后，通过 dep.notify() 进行依赖更新通知，其实就是调用 watcher 上的 update 方法，然后就进入 异步更新阶段，这个阶段后面章节会介绍.

对数组处理响应式

这一部分其实也是属于上面的内容，由于上面的内容比较多，这里单独进行解读.

主要处理内容：

• 先判断是否有 obj.__proto__ 属性，因为这个属性是非标准的，所导致某些浏览器版本上会不存在，需要进行判断，可以通过 Can I use 查看.

• 如果支持 proto 属性，就会通过 protoAugment(value, arrayMethods) 方法对原型链进行覆盖，即 target.__proto__ = src
• 如果不支持，通过 copyAugment(value, arrayMethods, arrayKeys) 方法在这个对象上使用 def(target, key, src[key]) 直接在数组对象上定义对应的属性

• arrayMethods 对象

• 基于数组原型，创建一个新对象，复写（增强）数组原型上的方法，使其覆盖数组原型方法
• 定义 methodsToPatch 数组，里面保存 7 个数组操作方法的方法名，遍历 methodsToPatch 通过 def() 方法为 arrayMethods 对象上定义上面的 7 个方法
• 如果执行的是 push、unshift、splice，代表新增、删除和替换，此时需要对新元素进行响应式处理
• 通过 ob.dep.notify() 进行依赖更新通知，这也是进入异步更新阶段
• 向外返回处理结果，对应方法的处理结果还是通过 apply 调用对应的原生方法进行返回

• this.observeArray(value) 方法遍历数组每一项，对其进行 observe 处理，即响应式处理
• 

总结

上面的内容，就用下面的几个问题进行简单总结，当然详细内容也有在前面给出.

Vue 响应式原理是如何实现的？

注意 data 配置项在进行 observe 处理时一定会是个对象，详细可看 initData () 方法

• 其核心是通过 Object.defineProperty 对数据的访问和设置进行拦截处理
• 以 data 配置项为例，通过 new Observer() 对其进行处理，此时当前响应式目标数据会被分为 对象 和 数组 两类

• 对象：调用 this.walk() 方法，遍历对象上所有的 key 通过 Object.defineProperty 设置 getter 和 setter 实现拦截；如果属性值依旧为 对象，则递归为 嵌套对象 上的每个 key 设置 getter 和 setter

• 通过 key 访问数据时触发 getter ，此时会进行依赖收集，即使用 dep.depend() 把相关的 watcher 保存在 dep 中
• 通过 key 设置数据时触发 setter，此时通过 dep.notify() 通知相关的 watcher 进行更新，即调用 watcher.update()

• 数组：重新对数组上的 7 个方法进行覆盖，实现对数组原型方法的拦截

• 通过遍历对数组的每一项元素通过 new Observer() 进行响应式处理，前提是当前数组项为 对象 或 数组
• 当该数组进行调用 push、unshift、splice 方法时，认为属于 插入、替换 操作，此时需要对当前传入的新数组项进行 new Observer() 处理，最终是要触发了这 7 个方法之一都会由 dep.notify() 通知 watcher 进行更新，即调用 watcher.update()

methods、computed、watch 有什么区别？

• 使用场景

• methods —— 包含比较复杂的组件处理逻辑，可包含 同步逻辑 和 异步逻辑
• computed —— 使用于简单的数据处理并返回结果，主要是为了减少在模板上的逻辑处理，因此只适用于 同步逻辑
• watch —— 主要用于监听组件数据变化时，需要进行复杂的操作，可包含 同步逻辑 和 异步逻辑

• 区别

• computed 和 methods

• methods —— 多次使用同一个 methods ，那么它就会被执行多次
• computed —— 默认是 懒执行 的，并且不可进行配置，在一次渲染中多次使用 computed 属性只会调用一次，即其计算结果具有 缓存 特性，本质上是通过 watcher.dirty 属性进行控制实现的

• computed 和 watch

• 本质上都是通过 Watcher 实现的，但 computed 是懒执行不可配置，而 watch 可以通过 options.immediate 进行配置

• watch 和 methods

• 它们并不适合进行比较，因为属于不同的内容，因此只能从包含关系进行区分，watch 中的复复杂逻辑可以抽离成一个个的 metods 中

vue 如何处理 props、data、methods、computed 中的属性 key 重复问题？

vue 中对每个配置项中 key 的定义都会做 判重处理，主要是依赖它们的优先级：

propsKey > dataKey > methodsKey > computedKey