关于vue.js:Vue2响应式原理与实现

一、Vue 的初始化

Vue 实质上是一个 裸露在全局的名为 Vue 的函数 ，在应用的时候通过 new 这个 Vue 函数来创立一个 Vue 实例，并且 会传入一个配置对象 。
Vue 函数内须要做的事件就是 依据传入的配置对象进行初始化。如:

// src/index.js
function Vue(options) {this._init(options);
}

这里通过 this 调用了_init()办法，这个 this 就是创立的 Vue 实例对象，然而目前 Vue 实例上并没有这个_init()办法，所以咱们 须要给 Vue 的 prototype 上增加一个_init()办法 。为了不便模块治理，咱们须要 专门建一个独自的 init.js 用于做初始化的工作 。init.js 中须要裸露一个 initMix() 办法，该办法接管 Vue 以便在 Vue 的 prototype 上增加原型办法，如:

// src/init.js
export function initMixin(Vue) {Vue.prototype._init = function(options) {// 这里进行 Vue 的初始化工作}
}

// src/index.js
import {initMixin} from "./init";
function Vue(options) {this._init(options);
}
initMixin(Vue); // 传入 Vue 以便在其 prototype 上增加_init()办法

此时_init()办法就能拿到用户传入的 options 配置对象，而后开始进行初始化工作:
① 将 options 对象挂载到 Vue 实例的 \$options 属性上 ;
② 初始化状态数据 ;
③ 判断用户有没有传 el 属性，如果传了则被动进行调用 \$mount()办法进行挂载 ，如果没有传，那么须要用户本人调用 \$mount() 办法进行挂载。

// src/init.js
export function initMixin(Vue) {Vue.prototype._init = function(options) {
        const vm = this;
        vm.$options = options; // 将 options 挂载到 Vue 实例的 $options 属性上
        // beforeCreate 这里执行 Vue 的 beforeCreate 生命周期
        initState(vm); // 进行状态的初始化
        // created 这里执行 Vue 的 created 生命周期
        if (options.el) { // 如果配置了 el 对象，那么就要进行 mount
            vm.$mount(options.el); // 被动调用 $mount()进行挂载}
    }
    Vue.prototype.$mount = function(el) {// 这里进行挂载操作}
}

二、Vue 状态数据的初始化

接下来就是进行状态的初始化，即 实现 initState()办法，状态的初始化是一个独立简单的过程，咱们须要将其独自放到一个 state.js 中进行，次要就是依据 options 中配置的属性进行特定的初始化操作，如:

export function initState(vm) {
    const options = vm.$options;
    if (options.data) { // 如果配置了 data 属性
        initData(vm);
    }
    if (options.computed) { // 如果配置了计算属性
        initComputed(vm);
    }
    if (options.watch) { // 如果配置了用户的 watch
        initWatch(vm);
    }
}
function initData(vm) {// 这里进行 data 属性的初始化}

function initComputed(vm) {// 这里进行 computed 计算属性的初始化}
function initWatch(vm) {// 这里进行用户 watch 的初始化}

三、将 data 数据变成响应式的

data 属性的初始化是 Vue 响应式零碎的外围，即 对 data 对象中的每一个属性进行观测监控 。用户传入的 data 可能是一个对象也可能是一个 返回对象的函数 。所以须要对 data 的类型进行判断，如果是函数，那么 传入 Vue 实例并执行这个函数拿到返回的对象作为用于观测的 data。同时为了不便 Vue 实例操作 data 中的数据，还须要 将 data 中的属性一一定义到 Vue 实例上，如:

// src/state.js 实现 initData()办法
import {proxy} from "./utils/index";
import {observe} from "./observer/index";
function initData(vm) {
    let data = vm.$options.data; // 可能是一个函数
    // 给 Vue 实例增加一个_data 属性和 $data 属性保留用户的 data
    data = vm._data = vm.$data = typeof data === "function" ? data.call(vm) : data;
    for (let key in data) { // 遍历 data 的所有属性
        proxy(vm, "_data", key); // 将 data 中的属性代理到 Vue 实例上，不便操作 data
    }
    observe(data); // 对数据进行察看
}

下面用到了一个 proxy 工具办法，用于将 data 中的属性代理到 Vue 实例上，其外部次要就是通过 Object.defineProperty()办法，将 data 中的属性代理到 Vue 实例上，如:

// src/utils/index.js
export function proxy(vm, source, key) {
    Object.defineProperty(vm, key, {get() {return vm[key];
        },
        set(newVal) {vm[key] = newVal;
        }
    });
}

这里的 vm 就是 vm._data 对象也就是 用户传入的 data，这样当用户通过 Vue 实例去操作数据的时候，实际上操作的就是用户传入的 data 对象。

接着就是对整个 data 数据进行观测了，进行数据观测的时候，这个数据必须是对象或者数组 ，否则不进行观测，如果这个对象中某个 key 的属性值也未对象，那么也须要对其进行观测，所以这里会 存在一个递归操作，这也是影响 Vue 性能的重要起因。数据观测也是一个独立简单的过程，须要对其独自治理，如:

// src/observer/index.js
import {isObject} from "../utils/index";
export function observe(data) {if (!isObject(data)) { // 仅察看对象和数组
        return;
    }
    // 如果要观测的数据是一个对象或者数组，那么给其创立一个 Observer 对象
    return new Observer(data);
}

// src/utils/index.js
export function isObject(data) {return data && typeof data === "object";}

接下来 Vue 会给合乎对象或者数组的 data 进行观测，给其创立一个 Observer 对象，观测的时候，对象和数组的解决会有所不同，对于对象而言，遍历对象中的每个属性并将其定义成响应式 即可；对于数组而言，因为数组可能存在十分多项，为了防止性能影响，不是将数组的所有索引定义成响应式的 ，而是 对数组中属于对象或者数组的元素进行观测。

// src/observer/index.js
class Observer {constructor(data) {
        this.data = data;
        def(data, "__ob__", this); // 给每个被察看的对象增加一个__ob__属性，如果是数组，那么这个数组也会有一个__ob__属性
        if (Array.isArray(data)) { // 对数组进行观测
            data.__proto__ = arrayMethods; // 重写数组办法
            this.observeArray(data); // 遍历数组中的每一项值进行观测
        } else {this.walk(data); // 对对象进行观测
        }
    }
    walk(data) {for (let key in data) { // 遍历对象中的所有 key，并定义成响应式的数据
            defineReactive(data, key, data[key]);
        }
    }
    observeArray(arr) {arr && arr.forEach((item) => {observe(item); // 对数组中的每一项进行观测
        }
    }
}
function defineReactive(data, key, value) {let ob = observe(value); // 对传入的对象的属性值进行递归观测
    Object.defineProperty(data, key, {get() {return value;},
        set(newVal) {if (newVal === value) {return;}
            observe(newVal); // 如果用户批改了值，那么也要对用户传入的新值观测一下，因为可能传入的是一个对象或者数组，对新值批改的时候能力检测到
            value = newVal;
        }
    })
}

对数组的观测，次要就是要从新那些会扭转原数组的办法，如: push、pop、shift、unshift、sort、reverse、splice，以便数组发生变化后可能给观察者发送告诉，并且push、unshift、splice 会给数组新增元素，咱们还须要晓得新增的是什么数据，须要对这些新增的数据进行观测。

const arrayProto = Array.prototype; // 获取数组的原型对象
export const arrayMethods = Object.create(arrayProto); // 依据数组的原型对象创立一个新的原型对象，防止办法有限循环执行
const methods = [
    "push",
    "pop",
    "shift",
    "unshift",
    "splice",
    "sort",
    "reverse"
];

methods.forEach((method) => {arrayMethods[method] = function(...args) {const result = arrayProto[method].apply(this, args); // 执行数组的上本来的办法
        const ob = this.__ob__;
        let inserted; // 用于记录用户给数组插入的新元素
        switch(method) {
            case "push":
            case "unshift":
                inserted = args;
                break;
            case "splice":
                inserted = args.slice(2);// 对应 splice 第三个参数才是用户要插入的数据
                break;
            default:
                console.log("拦挡的办法不存在");
        }
        if (inserted) { // 数组办法内，惟一能拿到的就是数组这个数据，所以咱们须要给察看的数组对象增加一个 key，值为 Observer 对象，能力拿到 Observer 对象上的办法
            ob.observeArray(inserted); // 对插入的新元素进行观测
        }
        return result;
    }
});