目录

• 原理分析
• 源码

原理分析

• 首先是调用 observe 函数

1、如果value值不是对象，或者是一个 vnode 对象，那么就退出函数

2、如果value对象上面如果有__ob__属性，说明这个数据已经被监听过了。如果没有，则实例化Observer类，将数据变成响应式数据

3、返回Observer实例对象

• Observer 构造函数初始化

1、首先保存value值到实例上面，并且初始化一个Dep实例，用来收集依赖

2、给value数据添加一个__ob__属性，值为，当前实例。用来标识这个数据已经被转化为响应数据，避免重复操作

3、如果是一个数组数据，如果有__proto__属性，就将__proto__修改为重写数组方法的对象中。如果没有__proto__属性，就会将重写数组方法直接挂载到数组数据中。最后循环数组的数组的每一项，吧数组的每一项也变成响应式数据

4、如果是一个对象，就回通过遍历对象上面的key-val值，调用defineReactive吧数据变成响应式数据

• defineReactive 函数

1、首先初始化一个Dep实例，用来收集依赖

2、获取对象的描述符对象，判断configurable是否为 false，是就退出函数

3、然后根据第五个参数，决定是否需要递归监听数据

4、使用Object.defineProperty，添加getter函数和setter函数，getter 函数中负责收集依赖(watcher)，setter函数中负责通知更新。同时 setter 函数中，新设置的值也会根据第五个参数，决定是否需要递归监听新设置的值。

5、getter 函数收集依赖的过程。在初始化watcher实例的时候，会立刻调用watcher实例上的get函数，get 函数会把自身的实例挂载到全局唯一的位置，也就会Dep.target上，然后在根据传进来的表达式读取一次值，触发数据的getter函数，getter 函数就会把这个全局唯一的 watcher 实例收集到依赖管理器中。最后移除这个全局唯一的实例。

• arrayMethods 对象

1、通过Object.create方法创建一个原型指向数组的prototype的 arrayMethods 对象

2、重写数组的 7 个方法，分别为push，pop，shift，unshift，splice，sort，reverse，并添加到 arrayMethods 对象上

3、以 push 方法为例。首先缓存原生的 push 方法，然后再 arrayMethods 对象中添加 push 方法，方法内部首先是调用原生的 push 方法，然后获取 push 插入的数据，也转化为响应式数据，最后通过this.__ob__获取 observer 实例，通知更新，并返回原生 push 方法执行的结果

当数组调用 push 方法的时候，通过原型链查找，最先找到的是 arrayMethods 对象的 push 方法，对于 findIndex 等方法，不在 arrayMethods 对象上，就会通过原型链继续往上查找

源码

源码位于src/core/observer/index.js

observe 函数：

export function observe(value: any, asRootData: ?boolean): Observer | void {if (!isObject(value) || value instanceof VNode) {return;}let ob: Observer | void;if (hasOwn(value, "__ob__") && value.__ob__ instanceof Observer) {ob = value.__ob__;} else if (// ...) {ob = new Observer(value);}// ...return ob;
}

Observer类：

// Observer类通过递归把对象上面的所有属性都转化为响应式数据
export class Observer {value: any;dep: Dep;constructor(value: any) {this.value = value;this.dep = new Dep();// 添加一个标记，标识这个数据已经被转化为响应式数据了，避免重复操作def(value, "__ob__", this);if (Array.isArray(value)) {// value是数组时候的逻辑if (hasProto) {// 修改原型链的指向value.__proto__ = arrayMethods;} else {// 对象上面不存在__proto__，就直接挂在到数组上面for (let i = 0, l = arrayKeys.length; i < l; i++) {const key = arrayKeys[i];def(value, key, arrayMethods[key]);}}this.observeArray(value);} else {this.walk(value);}}//  把对象转化为响应式walk(obj: Object) {const keys = Object.keys(obj);for (let i = 0; i < keys.length; i++) {defineReactive(obj, keys[i]);}}//   把数组转化为响应式observeArray(items: Array) {for (let i = 0, l = items.length; i < l; i++) {observe(items[i]);}}
}

defineReactive函数：

// 把数据转化为响应式数据
export function defineReactive(obj: Object, key: string, val: any) {// 实例化一个依赖管理器const dep = new Dep();// 获取描述符对象const property = Object.getOwnPropertyDescriptor(obj, key);// 不可配置的情况，数据被冻结了if (property && property.configurable === false) {return;}const getter = property && property.get;const setter = property && property.set;if ((!getter || setter) && arguments.length === 2) {// 参数只给了obj和key的情况val = obj[key];}let childOb = observe(val);Object.defineProperty(obj, key, {// 可遍历enumerable: true,// 可操作性configurable: true,get: function reactiveGetter() {const value = getter ? getter.call(obj) : val;// Dep.target指的是`Watcher`实例if (Dep.target) {// getter中收集依赖dep.depend();if (childOb) {childOb.dep.depend();if (Array.isArray(value)) {dependArray(value);}}}return value;},set: function reactiveSetter(newVal) {const value = getter ? getter.call(obj) : val;if (newVal === value || (newVal !== newVal && value !== value)) {return;}if (getter && !setter) return;if (setter) {setter.call(obj, newVal);} else {val = newVal;}childOb = observe(newVal);// setter中通知更新dep.notify();},});
}

src/core/observer/array.js

数组改写

const arrayProto = Array.prototype;// 创建一个对象作为拦截器
export const arrayMethods = Object.create(arrayProto);// 需要重写数组的7个方法
const methodsToPatch = ["push","pop","shift","unshift","splice","sort","reverse",
];methodsToPatch.forEach(function (method) {// 缓存原生方法const original = arrayProto[method];def(arrayMethods, method, function mutator(...args) {const result = original.apply(this, args);// 获取数组的__ob__，也就是observer类const ob = this.__ob__;let inserted;// push,unshift,splice会插入新对象switch (method) {case "push":case "unshift":inserted = args;break;case "splice":inserted = args.slice(2);break;}if (inserted) ob.observeArray(inserted);//通知更新ob.dep.notify();return result;});
});