深入响应式原理 - 响应式对象 - 《Part11（Vue2.0 源码）》

Vue 响应式原理（简单概述）
Object.defineProperty
initState
initProps
initData
proxy
observe
Observer
defineReactive

现在是时候深入一下了！Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。在这个章节，我们将研究一下 Vue 响应式系统的底层的细节。

Vue 响应式原理（简单概述）

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

Object.defineProperty

Object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性。

Object.defineProperty(obj, prop, descriptor);

obj 是要在其上定义属性的对象。prop 是要定义或修改的属性的名称。descriptor 是将被定义或修改的属性描述符。

比较核心的是 descriptor，它有很多可选键值，具体的可以去参阅它的文档。这里我们最关心的是 get 和 set，get 是一个给属性提供的 getter 方法，当我们访问了该属性的时候会触发 getter 方法；set 是一个给属性提供的 setter 方法，当我们对该属性做修改的时候会触发 setter 方法。

一旦对象拥有了 getter 和 setter，我们可以简单地把这个对象称为响应式对象。那么 Vue 把哪些对象变成了响应式对象了呢，接下来我们从源码层面分析。

initState

在 Vue 首次渲染过程中，也就是 new Vue 的时候，会调用 Vue 构造函数中 _init 方法中的 initState(vm)，我们在回顾一下 initState 的代码。

export function initState(vm: Component) {
    vm._watchers = [];
    const opts = vm.$options;
    if (opts.props) initProps(vm, opts.props);
    if (opts.methods) initMethods(vm, opts.methods);
    if (opts.data) {
        initData(vm);
    } else {
        observe((vm._data = {}), true /* asRootData */);
    }
    if (opts.computed) initComputed(vm, opts.computed);
    if (opts.watch && opts.watch !== nativeWatch) {
        initWatch(vm, opts.watch);
    }
}

initState 方法主要是对 props、methods、data、computed 和 wathcer 等属性做了初始化操作。这里我们重点分析 props 和 data，对于其它属性的初始化我们之后再详细分析。

initProps

这边主要列举核心部分的代码，其他就不一一列举了。

function initProps(vm: Component, propsOptions: Object) {
    const propsData = vm.$options.propsData || {};
    const props = (vm._props = {});
    for (const key in propsOptions) {
        const value = validateProp(key, propsOptions, propsData, vm);
        defineReactive(props, key, value);
        if (!(key in vm)) {
            proxy(vm, `_props`, key);
        }
    }
}

props 初始化过程主要就是遍历用户传进来的 props，校验 props 的 value 类型是否匹配（如果不匹配则触发警告），然后通过 defineReactive 把 props 的每个值都设置成响应式对象。

另外就是判断当前 props 的 key 是否已经在 vm 实例上，如果不在则通过 proxy 代理 _props 的成员到 vm 实例上，原本需要通过 vm._props.xxx 访问的成员，现在可以通过 vm.xxx 进行访问。

initData

function initData(vm: Component) {
    let data = vm.$options.data;
    data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {};
    // proxy data on instance
    const keys = Object.keys(data);
    const props = vm.$options.props;
    const methods = vm.$options.methods;
    let i = keys.length;
    while (i--) {
        const key = keys[i];
        if (process.env.NODE_ENV !== 'production') {
            if (methods && hasOwn(methods, key)) {
                warn(`Method "${key}" has already been defined as a data property.`, vm);
            }
        }
        if (props && hasOwn(props, key)) {
            process.env.NODE_ENV !== 'production' && warn(`The data property "${key}" is already declared as a prop. ` + `Use prop default value instead.`, vm);
        } else if (!isReserved(key)) {
            proxy(vm, `_data`, key);
        }
    }
    // observe data
    observe(data, true /* asRootData */);
}

props 初始化过程主要就是遍历用户传进来的选项 data，通过 proxy 代理 _data 的成员到 vm 实例上，原本需要通过 vm._data.xxx 访问的成员，现在可以通过 vm.xxx 进行访问。

因为三者 props 、methods、data 都会把成员代理到 vm 上面，所以必然会有名称冲突，所以 Vue 还进行了一些判断，在 while 循环中还对 method_s 和 _props 进行了判断，如果他们其中也定义了 data 中的某个 key 属性，则触发警告，不能重复定义同名变量。最后通过 observe 设置 data 为响应式对象，并且监听 data 对象的变化。

proxy

const sharedPropertyDefinition = {
    enumerable: true,
    configurable: true,
    get: noop,
    set: noop,
};
export function proxy(target: Object, sourceKey: string, key: string) {
    sharedPropertyDefinition.get = function proxyGetter() {
        return this[sourceKey][key];
    };
    sharedPropertyDefinition.set = function proxySetter(val) {
        this[sourceKey][key] = val;
    };
    Object.defineProperty(target, key, sharedPropertyDefinition);
}

proxy 其实就是对 Object.defineProperty 的封装。原本需要对 target[sourceKey][key] 的读写变成了对 target[key] 的读写。

observe

observe 的功能就是用来监测数据的变化，它的定义在 src/core/observer/index.js 中。

/**
 * Attempt to create an observer instance for a value,
 * returns the new observer if successfully observed,
 * or the existing observer if the value already has one.
 */
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 (shouldObserve && !isServerRendering() && (Array.isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && !value._isVue) {
        ob = new Observer(value);
    }
    return ob;
}

主要展示了一些关键部分的代码，observe 方法的作用就是给非 VNode 的对象类型数据添加一个 Observer，如果已经添加过则直接返回，否则在满足一定条件下去实例化一个 Observer 对象实例。接下来我们来看一下 Observer 的作用。

Observer

Observer 是一个类，它的作用是给对象的属性添加 getter 和 setter，用于依赖收集和派发更新。

/**
 * Observer class that is attached to each observed
 * object. Once attached, the observer converts the target
 * object's property keys into getter/setters that
 * collect dependencies and dispatch updates.
 */
export class Observer {
    value: any;
    dep: Dep;
    vmCount: number; // number of vms that have this object as root $data
    constructor(value: any) {
        this.value = value;
        this.dep = new Dep();
        this.vmCount = 0;
        def(value, '__ob__', this);
        if (Array.isArray(value)) {
            if (hasProto) {
                protoAugment(value, arrayMethods);
            } else {
                copyAugment(value, arrayMethods, arrayKeys);
            }
            this.observeArray(value);
        } else {
            this.walk(value);
        }
    }
    walk(obj: Object) {}
    observeArray(items: Array<any>) {}
}

Observer 的构造函数逻辑很简单，首先实例化 Dep 对象，这块稍后会介绍，接着通过执行 def 函数把自身实例添加到数据对象 value 的 ob 属性上，def 函数是一个 Object.defineProperty 的封装。接下来会对 value 做判断，对于数组会调用 observeArray 方法，否则对纯对象调用 walk 方法。

/**
 * Observe a list of Array items.
 */
observeArray(items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
        observe(items[i]);
    }
}

observeArray 是遍历数组再次调用 observe 方法。

/**
 * Walk through all properties and convert them into
 * getter/setters. This method should only be called when
 * value type is Object.
 */
walk(obj: Object) {
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
        defineReactive(obj, keys[i]);
    }
}

walk 方法是遍历对象的 key 调用 defineReactive 方法。接下来主要分析一下 defineReactive 实现了什么功能。

defineReactive

defineReactive 的功能就是定义一个响应式对象，给对象动态添加 getter 和 setter，它的定义在src/core/observer/index.js 中。

/**
 * Define a reactive property on an Object.
 */
export function defineReactive(obj: Object, key: string, val: any, customSetter?: ?Function, shallow?: boolean) {
    const dep = new Dep();
    const property = Object.getOwnPropertyDescriptor(obj, key);
    if (property && property.configurable === false) {
        return;
    }
    // cater for pre-defined getter/setters
    const getter = property && property.get;
    const setter = property && property.set;
    if ((!getter || setter) && arguments.length === 2) {
        val = obj[key];
    }
    let childOb = !shallow && observe(val);
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {},
        set: function reactiveSetter(newVal) {},
    });
}

defineReactive 函数最开始初始化 Dep 对象的实例，接着拿到 obj 的属性描述符，然后对子对象递归调用 observe 方法，这样就保证了无论 obj 的结构多复杂，它的所有子属性也能变成响应式的对象，这样我们访问或修改 obj 中一个嵌套较深的属性，也能触发 getter 和 setter。

最后利用 Object.defineProperty 去给 obj 的属性 key 添加 getter 和 setter。而关于 getter 和 setter 的具体实现，我们会在之后介绍。

这一节我们介绍了响应式对象，核心就是利用 Object.defineProperty 给数据添加了 getter 和 setter，目的就是为了在我们访问数据以及写数据的时候能自动执行一些逻辑：getter 做的事情是依赖收集，setter 做的事情是派发更新，那么在接下来的章节我们会重点对这两个过程分析。