vue2.x响应式原理

vue3.0发布了，回顾一波2.x原理

vue 2.x 响应式原理

image

主要做了这么几件事：数据劫持、收集依赖、派发更新

1. 数据劫持：new Vue的时候遍历data对象，用Object.defineProperty给所有属性加上了getter和setter
2. 依赖的收集：render的过程，会触发数据的getter，在getter的时候把当前的watcher对象收集起来
3. 派发更新：setter的时候，遍历这个数据的依赖对象（watcher对象），进行更新

数据劫持

通过Object.defineProperty劫持对象属性，让数据变为是可观察的

class Vue {
    constructor(options) {
        observer(options.data);
    }
    observer(value) {
        if (!value || (typeof value !== 'object')) {
            return;
        }
        // 遍历data对象 逐个加上getter setter
        Object.keys(value).forEach(key => defineReactive(value, key, value[key]));
    }
    defineReactive(obj, key, val) {
        const dep = new Dep(); // Dep是依赖收集类
        Object.defineProperty(obj, key, {
            enumerable: true, // 属性可枚举
            configurable: true  //属性可被修改或删除
            get() {
                dep.addSub(Dep.target); // 依赖采集
                return val;
            },
            set(newVal) {
                if (newVal === val) return;
                dep.notify(newVal); // 派发更新
            }
        })
    }
}

可以看到主要就是这个defineReactive函数，他利用Object.defineProperty实现了数据劫持

依赖收集&派发更新

那么vue是怎么知道当数据改变的时候都要去通知谁呢？它用了一个订阅者Dep，它用来存放我们的观察者对象，当数据发生改变，就通知观察者，观察者通过调用自己的update方法完成更新。

<!--订阅者Dep类-->

class Dep {
    constructor () {
        this.newDeps = [] // 用来存放我们的依赖对象（也即观察者）
    }
    addDep (watcher) {
        this.newDeps.push(watcher) // 向队列里新加一下watcher对象
    }
    update () {
        this.newDeps.forEach((sub) => {
            sub.update(); // 遍历watcher进行更新
        })
    }
}

<!--观察者Watcher类-->
class Watcher {
    constructor  () {
        Dep.target = this  // new Watcher的时候把观察者存放到Dep.target里面
    }
    update () {
        console.log("视图更新啦~"); // 更新视图
        <!--queueWatcher(this) 异步更新策略 后面再写一篇介绍 -->
    }
}

new一个Watcher对象，此时它会指向Dep.target，在render过程触发getter，把Dep.target添加到依赖队列。这样便完成了依赖的收集。数据改变，通知依赖进行update操作。

image

以上代码是2.x版本响应式原理的代码模拟，在vue中这几个类都是单独的文件，源码地址。