精华内容
下载资源
问答
  • 理解VUE双向数据绑定原理和实现

    万次阅读 多人点赞 2021-02-26 12:04:02
    一、原理: 1.vue 双向数据绑定是通过 数据劫持 结合...2.核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法; 3.介绍一下Object.defineProperty()方法 (1)Object.defineProperty(obj, prop, d...

    原文链接:  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双向数据绑定是如何进行的,以便我们确定好思考方向

    image

     

    image

    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

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

    image

    创建Vue的实例化函数

    image

    效果图如下:

    image

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

    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 3.0双向绑定原理的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 原理Vue2.x): Vue.js它是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter;在数据变动时发布消息给订阅者,触发相应的监听回调。 我们知道,实现MVVM...

    原理(Vue2.x):

    Vue.js它是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter;在数据变动时发布消息给订阅者,触发相应的监听回调。

     我们知道,实现MVVM主要包括两个方面:1.视图变化更新数据;2.数据变化更新视图。

      

    • 视图变化更新数据

    对于视图变化更新数据,其实可以通过事件监听即可,比如input标签监听‘input’事件就可以实现。

    • 数据变化更新视图

    对于数据变化更新视图,其实我们上面就讲到了,就是通过Object.defineProperty()来实现,设置一个set函数,当数据发生改变就会触发这个函数,所以我们只需要将一些需要更新的方法放在这个set函数里面就可以实现数据变化更新视图了。

    我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:

    实现步骤:

    (1)第一个就是首先我们需要对数据进行劫持监听,所以我们需要先设置实现一个监听器Observer,用来劫持并监听所有的属性,一旦属性发生变化,就通知订阅者。

    (2)第二个就是我们需要设置实现一个订阅者Watcher,用来接收属性变化的一个通知并执行相应的函数,从而更新视图。

    (3)第三个就是最后设置实现一个解析器Compile,用来可以扫描和解析每个节点的相关指令,然后初始化相应的模板数据以及订阅者。

    代码示例:

    Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

    Object.defineProperty()方法接收3个参数:

    第一个参数:需要定义属性的当前对象;

    第二个:当前需要定义的属性名;

    第三个:属性描述符;

    vue3双向数据绑定使用的是代理,与Vue2相比的好处在于不消耗性能,因为Vue2使用Object.defineProperty()方法嵌套深层的话需要使用递归比较耗性能,而Vue3使用代理则不用。

     

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>vuejs-iview-admin</title>
      </head>
      <body>
      <input type="text">
      <span id="text"></span>
      <script>
        var text = document.getElementById('text');
        var data = {};
        var value = '';//全局变量用于set设置和get取值
        Object.defineProperty(data, "name", {//属性描述
          //监听数据发生变化设置值,setter
          set(val) {//监听属性name的变化,val其实就是属性name
            text.innerHTML = val;
            value = val;
          },
          //获取值getter
          get() {
            return value;
          }
        })
        //监听input事件
        window.addEventListener('input', function (e) {
          data.name = e.target.value;
          console.log(data.name)
        });
      </script>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    
    wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==
    展开全文
  • vue双向数据绑定原理

    2021-04-29 19:09:20
    vue双向数据绑定原理 一、原理 vue双向数据绑定是通过数据劫持结合发布订阅者模式的方式来实现的,也就是说数据和视图同步,数据发生变化,试图跟着变化,数据也随之发生改变 核心:关于vue的数据绑定,其核心是 ...

    vue双向数据绑定原理

    一、原理

    1. vue双向数据绑定是通过数据劫持结合发布订阅者模式的方式来实现的,也就是说数据和视图同步,数据发生变化,试图跟着变化,数据也随之发生改变
    2. 核心:关于vue的数据绑定,其核心是 Object.defineProperty()方法
    3. 介绍一下Object.defineProperty()方法
      (1)Object.defineProperty(obj, prop, descriptor) ,这个语法内有三个参数,分别为 obj (要定义其上属性的对象) prop (要定义或修改的属性) descriptor (具体的改变方法)
      (2)简单地说,就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法,当我们给这个属性赋值时,又用到了它里面的set方法
    var obj = {}
    Object.defineProperty(obj,'hello',{
       get:function(){
        	console.log('调用了get方法')
        	},
       set:function(newVal){
       		console.log('调用了set方法,方法的值是'+ newVal)
       }
       });
    obj.hello;//'调用了get方法'
    obj.hello='hi';//'调用了set方法,方法的值是hi'
    

    二、先简单的实现一个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双向数据绑定是如何进行的,以便我们确定好思考方向

    //实现vue
    <div id="app">
    	<input type="text"  v-model="text">
    	{{text}}
    </div>
    <script>
    	var vm = new Vue({
    		el:'app',
    		data:{
    			text:'hello world'
    		}
    	})
    </script>
    

    2.任务拆分

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

    3.开始任务1——绑定内容

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

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

     <div id="app">
         <input type="text">
         "hello world"
     </div>
     <script>
          var dom = nodeToFragment(document.getElementById('app'))
          console.log(dom)//看一下碎片化文档
          console.log(document.getElementById('app'))//看一下被劫持后的app
          function nodeToFragment(node) {
             var fragment = document.createDocumentFragment()
             var child
             while (child = node.firstChild) {
                     fragment.appendChild(child)
                 }
                  return fragment
       }
      </script>
    

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

    来实现内容绑定

    我们要考虑两个问题,一个是如何绑定要input上,另一个是如何绑定要文本节点中。

    这样思路就来了,我们已经获取到了div的所以子节点了,就在DocumentFragment里面,然后对每一个节点进行处理,看是不是有跟vm实例中有关联的内容,如果有,修改这个节点的内容。然后重新添加入DocumentFragment中。

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

    在这里插入图片描述
    然后,在向碎片化文档中添加节点时,每个节点都处理一下。

    在这里插入图片描述
    创建Vue的实例化函数:
    在这里插入图片描述
    效果图如下:
    在这里插入图片描述

    展开全文
  • vue双向数据绑定原理

    万次阅读 2017-09-04 19:30:02
    最近两次面试的时候,被问到了vue双向数据绑定原理,因为初学不精,只是使用而没有深入研究,所以答不出来。之后就在网上查找了别人写的博客,学习一下。 下面是博客园一篇博客,以及MDN上讲解Object....

    有关双向数据绑定的原理

    最近两次面试的时候,被问到了vue中双向数据绑定的原理,因为初学不精,只是使用而没有深入研究,所以答不出来。之后就在网上查找了别人写的博客,学习一下。

    下面是博客园一篇博客,以及MDN上讲解Object.defineProperty()方法的地址。

    文章链接:vue的双向绑定原理及实现
    Mozilla 开发者服务:Object.defineProperty()

    因为内容比较长,就不转载了,只贴个连接在这里,有兴趣的可以直接点击链接访问。

    这里简单说一下个人的理解。

    vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

    在MDN上对该方法的说明是:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

    它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。

    属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。

    然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。

    var keyValue = 1;
    var obj = {};
    Object.defineProperty(obj,'key', {
        enumerable: true,
        configurable: true,
        get: function(){
            return keyValue;
        },
        set: function(newValue){
            keyValue = newValue;
            console.log(`keyValue的值已发生改变,目前的值是:${keyValue}`);
        }
    });
    
    obj.key; // 1
    
    obj.key = 'obj对象的key属性已经绑定了变量keyValue的值';
    // keyValue的值已发生改变,目前的值是:obj对象的key属性已经绑定了变量keyValue的值
    // "obj对象的key属性已经绑定了变量keyValue的值"
    
    keyValue; // "obj对象的key属性已经绑定了变量keyValue的值"

    上面这个例子就是改变了对象获取属性及设置属性的默认行为。

    对象obj获取属性key的值时,会触发上面的get方法,得到的是变量keyValue的值,然后当重新设置key的值时,触发set方法,会将变量keyValue的值改变为设置的值,如此就实现了一个简单的双向绑定:改变keyValue,obj.key得到的值也会改变,重新设置obj.key,keyValue一样会随之改变。

    当然,vue的双向绑定实际更复杂,但最基本的原理就是基于Object.defineProperty()方法改变数据存取的默认行为来实现的。

    展开全文
  • vue数据双向绑定原理

    2021-02-03 14:11:00
    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 结果 我们可以看到属性a有两...
  • 到这里我们的整个的模板编译也已经完成,不过这里我们并没有实现过多的指令,我们只是简单的实现了 v-model 指令,本意是通过这篇文章让大家熟悉与认识 Vue双向绑定原理,并不是去创造一个新的 MVVM 实例。...
  • 双向数据绑定:保留了 angular 的特点,在数据操作方面更为简单; 组件化:保留了 react 的优点,实现了 html 的封装和重用,在构建单页面应用方面有着独特的优势; 视图,数据,结构分离:使数据的更改更为简单,不...
  • 前言: 什么是数据双向绑定? vue是一个mvvm框架,即...在vue中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,vue双向数据绑定用起来就特别舒服了。 即两
  • vue.js采用的是数据劫持结合发布和-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。那么Object我们知道是一个对象,...
  • Vue数据双向绑定原理vue2向vue3的过渡)

    万次阅读 多人点赞 2019-11-13 15:13:40
    接下来我们浅析数据双向绑定原理 一、vue2 1、认识defineProperty vue2中的双向绑定是基于defineProperty的get操作与set操作,那么我们简单认识下defineProperty, 作用: 就是直接在一个对象上定义一个新属性,...
  • Vue 双向数据绑定原理

    2021-07-09 11:59:29
    Vue双向绑定原理 我们所知vue2.0是通过Object.defineProperty() 进行的数据响应式,通过观察者模式(发布订阅模式)依赖收集,派发通知。从而去实现对数据的监听对试图的更新。 Vue构造函数 class Vue { ...
  • vue3双向数据绑定原理

    2021-10-12 15:44:17
    1.1 通过ref起别名,通过$refs获取实例、 绑定input事件、将值定义在响应数据rective中 <input type="text" ref="reftxt" @input="getValue" :value="txt"> 1.2 导入需要的钩子 reactive(响应数据)、toRefs...
  • Vue双向数据绑定原理

    千次阅读 2021-04-13 00:21:16
    VUE双向数据绑定原理 vue双向数据绑定是通过 数据劫持,并结合 发布-订阅模式的方法来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变 核心:关于vue实现双向数据...
  • 虽然一句话把大概原理概括了,但是其内部的实现方式还是值得深究的,本文就以通俗易懂的方式剖析 Vue 内部双向数据绑定原理的实现过程 具体步骤需要几个重点:     1. 实现一个数据监听器 Observer,能够对...
  • vue双向绑定原理

    2021-06-10 16:34:20
    当前台显示的view发生变化了,它会实时反应到viewModel上,如果有需要,viewModel 会通过ajax等方法将改变的数据 传递给后台model同时从后台model获取过来的数据,通过vm将值响应到前台UI上双向绑定原理v...
  • vue3双向绑定实现原理

    2021-07-15 21:48:59
    一、vue3为什么要用proxy实现双向绑定? 1.object.defineProperty的缺点: 因为es5的object.defineProperty无法监听对象属性的删除和添加 不能监听数组的变化,除了push/pop/shift/unshift/splice/spObject.definert...
  • [vue] 什么是双向绑定原理是什么?

    千次阅读 多人点赞 2021-02-28 18:51:37
    [vue] 什么是双向绑定?原理是什么? 双向数据绑定个人理解就是存在data→view,view→data两条数据流的模式。其实可以简单的理解为change和bind的结合。目前双向数据绑定都是基于Object.defineProperty()重新定义get...
  • vue双向绑定原理什么?(2020/01/12) 前台UI数据改变实时反应在ViewModel上,后会通过ajax传到后台model上 后台改变的也会通过ViewModel响应到前台UI上 当data 有变化的时候它通过Object.defineProperty...
  • vue-双向绑定原理

    2021-03-28 20:55:16
    vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变; 2.vue2.0双向绑定实现 在vue2.x中数据双向绑定的核心...
  • “别具一格”的vue双向数据绑定原理

    千次阅读 多人点赞 2021-05-30 01:35:35
    见网上许多文章讲vue双向数据绑定一开口就大谈 Object.defineProperty 和 proxy。其实不然。 vue 中有两个“特别的”概念:响应式(它和defineProperty有关)和双向数据绑定。 其实响应式原理是一种单向行为:它是数据...
  • 双向数据绑定机制: 官方:vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调。 第一步: 需要...
  • vue双向数据绑定是一个很有意思的特性;知道其原理方能运用自如 <div id="demo"> <h1>双向绑定机制</h1> <!--表单控件绑定--> <input type="text" v-model="foo"> <!--...
  • 目录原理介绍DEMO实现双向绑定第一部分是Observer:第二部分是Watcher:第三部分是Dep:Vue中的双向绑定Vue中的Observer:Vue中的Dep:Vue中的Watcher:总结一下 原理介绍 ...双向数据绑定,简单点来说分为

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,646
精华内容 6,258
关键字:

vue的双向数据绑定原理是什么

vue 订阅