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
