Vue数据双向绑定原理

Vue数据双向绑定

Vue是通过数据劫持的方式来实现数据双向数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，该方法允许精确地添加或修改对象的属性，对数据添加属性描述符中的getter与setter实现劫持。

描述

运行一个Vue实例并将data打印，可以看到对象中对于msg有了get与set，通过他们就可以实现数据的劫持，从而进行数据的更新，在Vue中get与set是通过ES5的Object.defineProperty()方法定义的，该方法的具体功能可以查阅https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/defineProperty.md。

<!DOCTYPE html>
<html>
<head>
    <title>数据绑定</title>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
    </div> 
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Data'
        },
        created: function() {
            console.log(this.$data); //{__ob__: Observer} 
        }
    })
</script>
</html>

/*
{__ob__: Observer}
    msg: "Data"
    __ob__: Observer {value: {…}, dep: Dep, vmCount: 1}
    get msg: ƒ reactiveGetter()
    set msg: ƒ reactiveSetter(newVal)
    __proto__: Object
*/

分析实现

Vue的双向数据绑定，简单点来说分为以下三个部分：

Observer: 这里的主要工作是递归地监听对象上的所有属性，在属性值改变的时候，触发相应的Watcher。
Watcher: 观察者，当监听的数据值修改时，执行响应的回调函数，在Vue里面的更新模板内容。
Dep: 链接Observer和Watcher的桥梁，每一个Observer对应一个Dep，它内部维护一个数组，保存与该Observer相关的Watcher。

根据上面的三部分实现一个功能非常简单的Demo，实际Vue中的数据在页面的更新是异步的，且存在大量优化，实际非常复杂。
首先实现Dep方法，这是链接Observer和Watcher的桥梁，简单来说，就是一个监听者模式的事件总线，负责接收watcher并保存。其中subscribers数组用以保存将要触发的事件，addSub方法用以添加事件，notify方法用以触发事件。

function __dep(){
    this.subscribers = [];
    this.addSub = function(watcher){
        if(__dep.target && !this.subscribers.includes(__dep.target) ) this.subscribers.push(watcher);
    }
    this.notifyAll = function(){
        this.subscribers.forEach( watcher => watcher.update());
    }
}

Observer方法就是将数据进行劫持，使用Object.defineProperty对属性进行重定义，注意一个属性描述符只能是数据描述符和存取描述符这两者其中之一，不能同时是两者，所以在这个小Demo中使用getter与setter操作的的是定义的value局部变量，主要是利用了let的块级作用域定义value局部变量并利用闭包的原理实现了getter与setter操作value，对于每个数据绑定时都有一个自己的dep实例，利用这个总线来保存关于这个属性的Watcher，并在set更新数据的时候触发。

function __observe(obj){
    for(let item in obj){
        let dep = new __dep();
        let value = obj[item];
        if (Object.prototype.toString.call(value) === "[object Object]") __observe(value);
        Object.defineProperty(obj, item, {
            configurable: true,
            enumerable: true,
            get: function reactiveGetter() {
                if(__dep.target) dep.addSub(__dep.target);
                return value;
            },
            set: function reactiveSetter(newVal) {
                if (value === newVal) return value;
                value = newVal;
                dep.notifyAll();
            }
        });
    }
    return obj;
}

Watcher方法传入一个回调函数，用以执行数据变更后的操作，一般是用来进行模板的渲染，update方法就是在数据变更后执行的方法，activeRun是首次进行绑定时执行的操作，关于这个操作中的__dep.target，他的主要目的是将执行回调函数相关的数据进行sub，例如在回调函数中用到了msg，那么在执行这个activeRun的时候__dep.target就会指向this，然后执行fn()的时候会取得msg，此时就会触发msg的get()，而get中会判断这个__dep.target是不是空，此时这个__dep.target不为空，上文提到了每个属性都会有一个自己的dep实例，此时这个__dep.target便加入自身实例的subscribers，在执行完之后，便将__dep.target设置为null，重复这个过程将所有的相关属性与watcher进行了绑定，在相关属性进行set时，就会触发各个watcher的update然后执行渲染等操作。

function __watcher(fn){
    this.update = function(){
        fn();
    }
    
    this.activeRun = function(){
        __dep.target = this;
        fn();
        __dep.target = null;
    }
    this.activeRun();
}

代码示例

这是上述的小Demo的代码示例，其中上文没有提到的__proxy函数主要是为了将vm.$data中的属性直接代理到vm对象上，两个watcher中第一个是为了打印并查看数据，第二个是之前做的一个非常简单的模板引擎的渲染，为了演示数据变更使得页面数据重新渲染，在这个Demo下打开控制台，输入vm.msg = 11;即可触发页面的数据更改，也可以通过在40行添加一行console.log(dep);来查看每个属性的dep绑定的watcher。

<!DOCTYPE html>
<html>
<head>
    <title>数据绑定</title>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{date}}</div>
    </div> 
</body>
<script type="text/javascript">

    var Mvvm = function(config) {
        this.$el = config.el;
        this.__root = document.querySelector(this.$el);
        this.__originHTML = this.__root.innerHTML;

        function __dep(){
            this.subscribers = [];
            this.addSub = function(watcher){
                if(__dep.target && !this.subscribers.includes(__dep.target) ) this.subscribers.push(watcher);
            }
            this.notifyAll = function(){
                this.subscribers.forEach( watcher => watcher.update());
            }
        }


        function __observe(obj){
            for(let item in obj){
                let dep = new __dep();
                let value = obj[item];
                if (Object.prototype.toString.call(value) === "[object Object]") __observe(value);
                Object.defineProperty(obj, item, {
                    configurable: true,
                    enumerable: true,
                    get: function reactiveGetter() {
                        if(__dep.target) dep.addSub(__dep.target);
                        return value;
                    },
                    set: function reactiveSetter(newVal) {
                        if (value === newVal) return value;
                        value = newVal;
                        dep.notifyAll();
                    }
                });
            }
            return obj;
        }

        this.$data = __observe(config.data);

        function __proxy (target) {
            for(let item in target){
                Object.defineProperty(this, item, {
                    configurable: true,
                    enumerable: true,
                    get: function proxyGetter() {
                        return this.$data[item];
                    },
                    set: function proxySetter(newVal) {
                        this.$data[item] = newVal;
                    }
                });
            }
        }

        __proxy.call(this, config.data);

        function __watcher(fn){
            this.update = function(){
                fn();
            }
            
            this.activeRun = function(){
                __dep.target = this;
                fn();
                __dep.target = null;
            }
            this.activeRun();
        }

        new __watcher(() => {
            console.log(this.msg, this.date);
        })

        new __watcher(() => {
            var html = String(this.__originHTML||'').replace(/"/g,'\\"').replace(/\s+|\r|\t|\n/g, ' ')
            .replace(/\{\{(.)*?\}\}/g, function(value){ 
                return  value.replace("{{",'"+(').replace("}}",')+"');
            })
            html = `var targetHTML = "${html}";return targetHTML;`;
            var parsedHTML = new Function(...Object.keys(this.$data), html)(...Object.values(this.$data));
            this.__root.innerHTML = parsedHTML;
        })

    }

    var vm = new Mvvm({
        el: "#app",
        data: {
            msg: "1",
            date: new Date(),
            obj: {
                a: 1,
                b: 11
            }
        }
    })

</script>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jianshu.com/p/255d4dec710a
https://www.jianshu.com/p/c8186e9e027b
https://www.cnblogs.com/wangjiachen666/p/9883916.html
https://blog.csdn.net/wangshu696/article/details/84570886
https://blog.csdn.net/qq_43051529/article/details/82877673
https://github.com/liutao/vue2.0-source/blob/master/%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A.md

posted @ 2020-06-16 17:04 WindRunnerMax 阅读(791) 评论(2) 编辑收藏举报

刷新页面返回顶部

WindRunnerMax

Vue数据双向绑定原理

Vue数据双向绑定

描述

分析实现

代码示例

每日一题

参考

公告