理解VUE双向数据绑定原理和实现

原文链接：  https://www.jianshu.com/p/e7ebb1500613 

一、原理：

1.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

2.核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；

3.介绍一下Object.defineProperty()方法
（1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
（2）简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

set，get方法初步了解

二、先简单的实现一个js的双向数据绑定来熟悉一下这个方法：

 

 

 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <div id="app">
        <input type="text" id="a">
        <span id="b"></span>
    </div>
</body>
<script>
    var obj = {};  //定义一个空对象
 
    var val = 'zhao';  //赋予初始值
 
    Object.defineProperty(obj, 'val', {//定义要修改对象的属性
 
        get: function () {
 
            return val;
        },
 
        set: function (newVal) { 
 
             val = newVal;//定义val等于修改后的内容
 
            document.getElementById('a').value = val;//让文本框的内容等于val
            
            document.getElementById('b').innerHTML = val;//让span的内容等于val
 
        }
 
    });
    document.addEventListener('keyup', function (e) {//当在文本框输入内容时让对象里你定义的val等于文本框的值
 
        obj.val = e.target.value;
 
    })
 
</script>
 
</html>

 

 

这样我们就能实现js的双向数据绑定，也对这个方法有初步的了解；
这个例子实现的效果是：随着文本框输入文字的变化，span中会同步显示相同的文字内容；这样就实现了 model => view 以及 view => model 的双向绑定。
 通过添加事件监听keyup来触发set方法，而set再修改了访问器属性的同时，也修改了dom样式，改变了span标签内的文本。
 

三、实现一个真正的双向绑定的原理
 

1.实现效果
 先来看一下vue双向数据绑定是如何进行的，以便我们确定好思考方向
 

 

 
 

 

2.任务拆分
 

拆分任务可以让我们的思路更加清晰：
 （1）将vue中的data中的内容绑定到输入文本框和文本节点中
 （2）当文本框的内容改变时，vue实例中的data也同时发生改变
 （3）当data中的内容发生改变时，输入框及文本节点的内容也发生变化
 

3.开始任务1——绑定内容
 我们先了解一下 DocuemntFragment（碎片化文档）这个概念，你可以把他认为一个dom节点收容器，当你创造了10个节点，当每个节点都插入到文档当中都会引发一次浏览器的回流，也就是说浏览器要回流10次，十分消耗资源。
 而使用碎片化文档，也就是说我把10个节点都先放入到一个容器当中，最后我再把容器直接插入到文档就可以了！浏览器只回流了1次。
 注意：还有一个很重要的特性是，如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。
 

举个例子：
 可以看到，我的app中有两个子节点，一个元素节点，一个文本节点
 但是，当我通过DocumentFragment 劫持数据一下后
 

 

image
 

 

image
 

 

image
 

注意：我的碎片化文档是将子节点都劫持了过来，而我的id为app的div内已经没有内容了。
 同时要主要我while的判断条件。判断是否有子节点，因为我每次appendChild都把node中的第一个子节点劫持走了，node中就会少一个，直到没有的时候，child也就变成了undefined，也就终止了循环。
 

来实现内容绑定
 我们要考虑两个问题，一个是如何绑定要input上，另一个是如何绑定要文本节点中。
 这样思路就来了，我们已经获取到了div的所以子节点了，就在DocumentFragment里面，然后对每一个节点进行处理，看是不是有跟vm实例中有关联的内容，如果有，修改这个节点的内容。然后重新添加入DocumentFragment中。
 

首先，我们写一个处理每一个节点的函数，如果有input绑定v-model属性或者有{ 
 { xxx }}的文本节点出现，就进行内容替换，替换为vm实例中的data中的内容
 

 

image
 

然后，在向碎片化文档中添加节点时，每个节点都处理一下。
 

 

创建Vue的实例化函数
 

 

效果图如下：
 

 

我们成功将内容都绑定到了输入框与文本节点上！
 

4、实现任务2——【view => model
 对于此任务，我们从输入框考虑，输入框的问题，输入框如何改变data。我们通过事件监听器keyup，input等，来获取到最新的value，然后通过Object.defineProperty将获取的最新的value，赋值给实例vm的text，我们把vm实例中的data下的text通过Object.defineProperty设置为访问器属性，这样给vm.text赋值，就触发了set。set函数的作用一个是更新data中的text，另一个等到任务三再说。
 

首先实现一个响应式监听属性的函数。一旦有赋新值就发生变化
 

 

image
 

然后，实现一个观察者，对于一个实例 每一个属性值都进行观察。
 

 

image
 

改写编译函数，注意由于改成了访问器属性，访问的方法也产生变化，同时添加了事件监听器，把实例的text值随时更新
 

 

image
 

实例函数中，观察data中的所有属性值，注意增添了observe
 

 

image
 

最终我们改变input中的内容能改变data中的数据，单页面却没有刷新
 

 

image
 

 

image
 

4、实现任务3——【model => view】
 通过修改vm实例的属性 该改变输入框的内容 与 文本节点的内容。
 这里涉及到一个问题 需要我们注意，当我们修改输入框，改变了vm实例的属性，这是1对1的。
 但是，我们可能在页面中多处用到 data中的属性，这是1对多的。也就是说，改变1个model的值可以改变多个view中的值。
 这就需要我们引入一个新的知识点：
 

订阅/发布者模式
 订阅发布模式（又称观察者模式）定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。
 

发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作
 1
 举个例子：
 

 

image
 

之前提到的set函数的第二个作用 就是来提醒订阅者 进行noticy操作，告诉他们：“我的text变了！” 文本节点变成了订阅者，接到消息后，立马进行update操作
 

回顾一下，每当 new 一个 Vue，主要做了两件事：第一个是监听数据：observe(data)，第二个是编译 HTML：nodeToFragement(id)。
 在监听数据的过程中，我们会为 data 中的每一个属性生成一个主题对象 dep。
 

在编译 HTML 的过程中，会为每个与数据绑定相关的节点生成一个订阅者 watcher，watcher 会将自己添加到相应属性的 dep 容器中。
 

我们已经实现：修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的 set 方法。
 

接下来我们要实现的是：发出通知 dep.notify() => 触发订阅者的 update 方法 => 更新视图。
 这里的关键逻辑是：如何将 watcher 添加到关联属性的 dep 中。
 

注意： 我把直接赋值的操作改为了 添加一个 Watcher 订阅者
 

 

image
 

那么，Watcher又该做些什么呢？
 

 

image
 

首先，将自己赋给了一个全局变量 Dep.target；
 

其次，执行了 update 方法，进而执行了 get 方法，get 的方法读取了 vm 的访问器属性，从而触发了访问器属性的 get 方法，get 方法中将该 watcher 添加到了对应访问器属性的 dep 中；
 

再次，获取属性的值，然后更新视图。
 

最后，将 Dep.target 设为空。因为它是全局变量，也是 watcher 与 dep 关联的唯一桥梁，任何时刻都必须保证 Dep.target 只有一个值。
 

 

image
 

 

image
 

最终我们就实现了这个双向数据绑定功能，虽然很繁琐，但我相信，你多打几遍，一定会对你有所帮助，加油吧!!
 

最后小编给大家附上源码：
 

 
 

 

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
 
    <body>
 
        <div id="app">
 
            <input type="text" v-model="text" /> {{text}}
 
        </div>
 
    </body>
 
    <script type="text/javascript">
        //          编译函数
        function compile(node, vm) {
 
            var reg = /\{\{(.*)\}\}/; // 来匹配{{xxx}}中的xxx
 
            //如果是元素节点
            if(node.nodeType === 1) {
 
                var attr = node.attributes;
 
                //解析元素节点的所有属性
 
                for(let i = 0; i < attr.length; i++) {
 
                    if(attr[i].nodeName == 'v-model') {
 
                        var name = attr[i].nodeValue //看看是与哪一个数据相关
 
                        node.addEventListener('input', function(e) { //将与其相关的数据改为最新值
                            vm[name] = e.target.value
                        })
 
                        node.value = vm.data[name]; //将data中的值赋予给该node
 
                        node.removeAttribute('v-model')
 
                    }
 
                }
 
            }
 
            //如果是文本节点
 
            if(node.nodeType === 3) {
 
                if(reg.test(node.nodeValue)) {
 
                    var name = RegExp.$1; //获取到匹配的字符串
 
                    name = name.trim();
 
                    //                  node.nodeValue = vm[name]; //将data中的值赋予给该node
 
                    new Watcher(vm, node, name) //绑定一个订阅者
                }
 
            }
 
        }
 
        //          在向碎片化文档中添加节点时，每个节点都处理一下
 
        function nodeToFragment(node, vm) {
 
            var fragment = document.createDocumentFragment();
 
            var child;
 
            while(child = node.firstChild) {
 
                compile(child, vm);
 
                fragment.appendChild(child);
 
            }
 
            return fragment
 
        }
 
        //          Vue构造函数     
        //      观察data中的所有属性值，注意增添了observe
 
        function Vue(options) {
 
            this.data = options.data;
 
            observe(this.data, this)
 
            var id = options.el;
 
            var dom = nodeToFragment(document.getElementById(id), this)
 
            //处理完所有节点后，重新把内容添加回去
            document.getElementById(id).appendChild(dom)
 
        }
 
        //      实现一个响应式监听属性的函数。一旦有赋新值就发生变化 
 
        function defineReactive(obj, key, val) {
 
            var dep = new Dep();
 
            Object.defineProperty(obj, key, {
 
                get: function() {
 
                    if(Dep.target) {
 
                        dep.addSub(Dep.target)
 
                    }
 
                    return val
 
                },
                set: function(newVal) {
 
                    if(newVal === val) {
 
                        return
 
                    }
 
                    val = newVal;
 
                    console.log('新值' + val);
 
                    //一旦更新立马通知
 
                    dep.notify();
 
                }
 
            })
 
        }
 
        //      实现一个观察者，对于一个实例 每一个属性值都进行观察。
 
        function observe(obj, vm) {
 
            for(let key of Object.keys(obj)) {
 
                defineReactive(vm, key, obj[key]);
 
            }
 
        }
 
        //      Watcher监听者
 
        function Watcher(vm, node, name) {
 
            Dep.target = this;
 
            this.vm = vm;
            this.node = node;
            this.name = name;
 
            this.update();
 
            Dep.target = null;
 
        }
 
        Watcher.prototype = {
 
            update() {
                this.get();
                this.node.nodeValue = this.value //更改节点内容的关键
            },
            get() {
                this.value = this.vm[this.name] //触发相应的get
            }
 
        }
 
        //      dep构造函数
 
        function Dep() {
            this.subs = []
        }
        Dep.prototype = {
            addSub(sub) {
                this.subs.push(sub)
            },
            notify() {
                this.subs.forEach(function(sub) {
                    sub.update();
                })
            }
        }
 
        var vm = new Vue({
 
            el: 'app',
 
            data: {
                text: '赵刚'
            }
 
        })
    </script>
 
</html>

 

 
  

        # vue.js
      
        # javascript
      
        # html
      
  
 
 Logo 
Vue
 
前往低代码交流专区
 
 
  
更多推荐
  
 
vue 表单验证
 
1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^
 
avatar Vue
 
cover
 
echarts堆叠柱状图
 
 
avatar Vue
 
 
Vue里echarts根据页面大小动态调整/自适应
 
Vue里echarts根据页面大小动态调整/自适应
 
avatar Vue