美文网首页Vue
vue.js响应式系统的基本原理

vue.js响应式系统的基本原理

作者: 小小的白菜 | 来源:发表于2018-10-24 10:09 被阅读0次

    摘自《剖析Vue.js内部运行机制》

    Vue.js是一款MVVM框架,数据模型仅仅是普通的JavaScript对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是响应式系统。尽管我们在使用Vue.js 进行开发时不会直接修改响应式系统,但是理解它的实现有助于避开一些常见的坑,也有助于在遇见一些琢磨不透的问题时可以深入其原理来解决它。

    Object.defineProperty

    首先我们来介绍一下 Object.definePropertyVue.js 就是基于它实现响应式系统的。

    /*
        obj: 目标对象
        prop: 需要操作的目标对象的属性名
        descriptor: 描述符
        
        return value 传入对象
    */
    Object.defineProperty(obj, prop, descriptor)
    

    descriptor的一些属性:

    • enumerable:属性是否可枚举,默认false
    • configurable:属性是否可以被修改或者删除,默认 false
    • get:获取属性的方法。
    • set:设置属性的方法。

    实现 observer (可观察的)

    知道了Object.defineProperty 以后,我们来用它使对象变成可观察的。

    首先我们定义一个cb函数,这个函数用来模拟视图更新,调用它即代表更新视图,内部可以是一些更新视图的方法。

    function cb (val) {
        /* 渲染视图 */
        console.log("视图更新啦~");
    }
    

    然后我们定义一个defineReactive,这个方法通过 Object.defineProperty来实现对对象的响应式化,入参是一个obj(需要绑定的对象)、keyobj 的某一个属性),val(具体的值)。经过 defineReactive处理以后,我们的objkey属性在的时候会触发reactiveGetter方法,而在该属性被的时候则会触发 reactiveSetter方法。

    function defineReactive (obj, key, val) {
        Object.defineProperty(obj, key, {
            enumerable: true,       /* 属性可枚举 */
            configurable: true,     /* 属性可被修改或删除 */
            get: function reactiveGetter () {
                return val;         /* 实际上会依赖收集,下一小节会讲 */
            },
            set: function reactiveSetter (newVal) {
                if (newVal === val) return;
                cb(newVal);
            }
        });
    }
    

    当然这是不够的,我们需要在上面再封装一层 observer。这个函数传入一个value(需要响应式化的对象),通过遍历所有属性的方式对该对象的每一个属性都通过 defineReactive 处理。

    function observer (value) {
        if (!value || (typeof value !== 'object')) {
            return;
        }
        
        Object.keys(value).forEach((key) => {
            defineReactive(value, key, value[key]);
        });
    }
    

    最后,让我们用observer来封装一个Vue吧!

    Vue的构造函数中,对 optionsdata 进行处理,这里的 data想必大家很熟悉,就是平时我们在写Vue 项目时组件中的data属性(实际上是一个函数,这里当作一个对象来简单处理)。

    class Vue {
        /* Vue 构造类 */
        constructor(options) {
            this._data = options.data;
            observer(this._data);
        }
    }
    

    这样我们只要 new一个Vue对象,就会将 data中的数据进行响应式化。如果我们对data的属性进行下面的操作,就会触发 cb 方法更新视图。

    let o = new Vue({
        data: {
            test: "I am test."
        }
    });
    o._data.test = "hello,world.";  /* 视图更新啦~ */
    

    至此,响应式原理已经介绍完了,接下来让我们学习响应式系统的另一部分 ——依赖收集

    响应式系统的依赖收集追踪原理

    栗子一:

    我们现在有这么一个 Vue对象。

    new Vue({
        template: 
            `<div>
                <span>{{text1}}</span> 
                <span>{{text2}}</span> 
            <div>`,
        data: {
            text1: 'text1',
            text2: 'text2',
            text3: 'text3'
        }
    });
    

    然后我们做了这么一个操作。

    this.text3 = 'modify text3';
    

    我们修改了 datatext3 的数据,但是因为视图中并不需要用到 text3,所以我们并不需要触发上一章所讲的cb函数来更新视图,调用cb显然是不正确的。

    栗子二:

    let globalObj = {
        text1: 'text1'
    };
    let o1 = new Vue({
        template:
            `<div>
                <span>{{text1}}</span> 
            <div>`,
        data: globalObj
    });
    let o2 = new Vue({
        template:
            `<div>
                <span>{{text1}}</span> 
            <div>`,
        data: globalObj
    });
    

    这个时候,我们执行了如下操作。

    globalObj.text1 = 'hello,text1';
    

    我们应该需要通知o1以及o2两个 vm实例进行视图的更新,依赖收集会让text1这个数据知道:“有两个地方依赖我的数据,我变化的时候需要通知它们”。

    接下来我们来介绍一下依赖收集是如何实现的。

    订阅者 Dep

    首先我们来实现一个订阅者Dep,它的主要作用是用来存放Watcher观察者对象。

    class Dep {
        constructor () {
            /* 用来存放 Watcher 对象的数组 */
            this.subs = [];
        }
        /* 在 subs 中添加一个 Watcher 对象 */
        addSub (sub) {
            this.subs.push(sub);
        }
        /* 通知所有 Watcher 对象更新视图 */
        notify () {
            this.subs.forEach((sub) => {
                sub.update();
            })
        }
    }
    

    为了便于理解我们只实现了添加的部分代码,主要是两件事情:

    • addSub方法可以在目前的Dep对象中增加一个Watcher 的订阅操作;
    • notify方法通知目前Dep 对象的subs中的所有 Watcher对象触发更新操作。

    观察者 Watcher

    class Watcher {
        constructor () {
            /* 在 new 一个 Watcher 对象时将该对象赋值给 Dep.target,在 get 中会用到 */
            Dep.target = this;
        }
        /* 更新视图的方法 */
        update () {
            console.log("视图更新啦~");
        }
    }
    Dep.target = null;
    

    依赖收集

    接下来我们修改一下defineReactive以及Vue的构造函数,来完成依赖收集。

    我们在闭包中增加了一个Dep 类的对象,用来收集 Watcher对象。在对象被的时候,会触发reactiveGetter函数把当前的 Watcher对象(存放在Dep.target中)收集到Dep 类中去。之后如果当该对象被的时候,则会触发 reactiveSetter方法,通知 Dep类调用 notify来触发所有Watcher 对象的 update 方法更新对应视图。

    function defineReactive (obj, key, val) {
        /* 一个 Dep 类对象 */
        const dep = new Dep();
        
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get: function reactiveGetter () {
                /* 将 Dep.target(即当前的 Watcher 对象存入 dep 的 subs 中) */
                dep.addSub(Dep.target);
                return val;         
            },
            set: function reactiveSetter (newVal) {
                if (newVal === val) return;
                /* 在 set 的时候触发 dep 的 notify 来通知所有的 Watcher 对象更新视图 */
                dep.notify();
            }
        });
    }
    class Vue {
        constructor(options) {
            this._data = options.data;
            observer(this._data);
            /* 新建一个 Watcher 观察者对象,这时候 Dep.target 会指向这个 Watcher 对象 */
            new Watcher();
            /* 在这里模拟 render 的过程,为了触发 test 属性的 get 函数 */
            console.log('render~', this._data.test);
        }
    }
    

    总结

    首先在 observer 的过程中会注册get方法,该方法用来进行依赖收集。在它的闭包中会有一个Dep 对象,这个对象用来存放Watcher对象的实例。其实依赖收集的过程就是把Watcher实例存放到对应的 Dep 对象中去。

    get方法可以让当前的Watcher对象(Dep.target)存放到它的subs 中(addSub )方法,在数据变化时,set会调用Dep对象的 notify方法通知它内部所有的Watcher 对象进行视图更新。这是Object.definePropertyset/get方法处理的事情,那么依赖收集的前提条件还有两个:

    • 触发 get方法;
    • 新建一个Watcher对象。

    这个我们在Vue 的构造类中处理。新建一个Watcher 对象只需要new出来,这时候Dep.target 已经指向了这个new出来的 Watcher 对象来。

    而触发 get方法也很简单,实际上只要把 render function进行渲染,那么其中的依赖的对象都会被读取,这里我们通过打印来模拟这个过程,读取 test来触发get 进行依赖收集

    相关文章

      网友评论

        本文标题:vue.js响应式系统的基本原理

        本文链接:https://www.haomeiwen.com/subject/wtlttqtx.html