1. Vue2.x 基于 Object.defineProperty 方法实现响应式（Vue3 将采用 Proxy）

Object.defineProperty(obj, prop, descriptor)

2. 定义 defineReactive 来对对象的属性进行 getter、setter 操作

function defineReacive(obj, key, val){    Object.defineProperty(obj, key, {        enumerable: true,        configurable: true,        get() {            return val;        },        set(newVal) {            if(val === newVal) return;            val = newVal;            callback(newVal);        }    })}

3. 我们需要遍历所有数据，所以需要 observer 方法去观察

function observer(val){    if(!val || typeof val !== 'object') return;    Obejct.keys(val).forEach(key => {        defineReactive(val, key, val(key));    })}

4. 模拟 Vue 构造函数

class MockVue {    constructor(options) {        this._data = opations.data;        observer(this._data);    }}

5. 实例化 MockVue 生成实例对象

let v1 = new MockVue({    data: { }})

如何让发生变动时触发相关视图更新，那么我们就需要收集依赖，

6. 订阅者 Dep（存放watcher观察者对象）

class Dep {    constructor() {        this.subs = [];    }    addSub(sub) {        this.subs.push(sub);    }    notify() {        this.subs.forEach(sub => {            sub.update();        })    }}

7. 观察者 Wacher

class Watcher {    constructor() {        Dep.target = this;    }    update() {        console.log('update...');    }}

8. 修改 defineReactive 方法

function defineReacive(obj, key, val){    + const dep = new Dep();     Object.defineProperty(obj, key, {        enumerable: true,        configurable: true,        get() {            + dep.addSub(Dep.target);             return val;        },        set(newVal) {            if(val === newVal) return;            val = newVal;            - callback(newVal);            + dep.notify();         }    })}

9. 重写 MockVue

class MockVue {    constructor(options) {        this._data = options.data;        observer(this._data);        new Watcher();               // Dep.target会指向这个watcher对象        console.log('触发getter')；    }}