精华内容
下载资源
问答
  • 本篇文章主要介绍了详解Vue双向数据绑定原理解析 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 双向数据绑定原理

    2020-08-18 14:21:10
    vue 双向数据绑定原理
  • Vue双向数据绑定原理

    千次阅读 2021-04-13 00:21:16
    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(newValue){
        console.log('调用了set方法,方法的值是' + newValue);
      }
    });
    obj.hello; // => '调用了get方法'
    obj.hello = 'hi'; // => '调用了set方法,方法的值是hi'
    

    4. 再介绍一下发布-订阅模式

    在这里插入图片描述

    原文来自于这里,我说一下我自己的理解,其实发布-订阅模式和观察者模式很像,但是不同的是,观察者模式只有两个角色,而且Obsever是知道Subject的,但是在发布-订阅模式中,他们两却彼此不了解,他们是在一种类似于中间件的帮助下进行通信的,换句话说,还有第三个组件,称为代理或消息代理或事件总线,Observer和Subject都知道该组件,该组件过滤所有传入消息并相应的分发他们。

    5. 然后就是简单模拟实现一下Vue的双向数据绑定

    <input type="text">
    <p></p>
    

    我们要对上面两个DOM元素实现双向数据绑定,就是当输入inputValue时下面的p可以及时更新inputValue内容

    <script>
        let input = document.querySelector('input')
        let p = document.querySelector('p')
        let obj = {}
        let value = ''
        Object.defineProperty(obj, 'inputvalue', {
            get() {
                return value
            },
            set(newValue) {
                input.value = newValue
                p.innerHTML = newValue
            }
        })
        // 订阅者 DOM元素
        input.value = obj.inputvalue
        p.innerHTML = obj.inputvalue
        // 监听输入的事件
        input.addEventListener('keyup', function (e) {
            // 修改inputvalue 达到修改input.value 以及input.innerHTML
            // 发布者
            obj.inputvalue = e.target.value // 触发了set
        })
    </script>
    

    所以在我们的代码中,订阅者就是页面中的DOM元素,因为他会订阅我们的inputvalue,而发布者就是监听事件中的数据,一旦监听到了数据有修改,就要发布给我们的订阅者,也就是说输入的数据一旦发生了变化,我们的页面DOM元素的数据也会发生变化,所以这个中间件就是Object.defineProperty中的set方法

    6. 结果演示

    在这里插入图片描述
    在这里插入图片描述

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

    万次阅读 2019-03-07 14:20:57
    vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来...vue实现双向数据绑定原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set...

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

          

     

     

     vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。在面试中如何应对?面试官:说一下VUE双向绑定的原理?答:VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。代码演示:defineProperty的用法var obj = { };var name;//第一个参数:定义属性的对象。//第二个参数:要定义或修改的属性的名称。//第三个参数:将被定义或修改的属性描述符。

    Object.defineProperty(obj, "data", {

    //获取值

    get: function ()

    {  return name;  },

    //设置值

    set: function (val) {

    name = val;console.log(val)}})

    //赋值调用

    setobj.data = 'aaa';

    //取值调用

    getconsole.log(obj.data);

    代码演示:defineProperty的双向绑定var obj={};Object.defineProperty(obj, 'val',{set:function (newVal) {document.getElementById("a").value =newVal==undefined?'':newVal;document.getElementById("b").innerHTML=newVal==undefined?'':newVal;}});document.getElementById("a").addEventListener("keyup",function (e) {obj.val = e.target.value;})

     

     

    展开全文
  • 本文主要介绍了vue双向数据绑定原理,文章结尾附上完整demo下载。具有一定的参考价值,下面跟着小编一起来看下吧
  • 理解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双向数据绑定原理(面试必问)

    千次阅读 2021-01-08 14:26:31
    vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。 具体步骤 需要observer的数据...

    答案:
    vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。
    在这里插入图片描述
    具体步骤

    1. 需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter
      这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
    2. compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
    3. Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
      (1)在自身实例化时往属性订阅器(dep)里面添加自己
      (2)自身必须有一个update()方法
      (3)待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
    4. MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

    1. 什么是Object.defineProperty?

    1.1 语法:

    Object.defineProperty(obj, prop, descriptor)
    
    

    参数说明:

    1. obj:必需。目标对象
    2. prop:必需。需定义或修改的属性的名字
    3. descriptor:必需。目标属性所拥有的特性

    返回值:
    传入函数的对象。即第一个参数obj;

    针对属性,我们可以给这个属性设置一些特性,比如是否只读不可以写;是否可以被for…in或Object.keys()遍历。

    给对象的属性添加特性描述,目前提供两种形式:数据描述和存取器描述。

    当修改或定义对象的某个属性的时候,给这个属性添加一些特性:

    数据描述:

    var obj = {
        test:"hello"
    }
    //对象已有的属性添加特性描述
    Object.defineProperty(obj,"test",{
        configurable:true | false,
        enumerable:true | false,
        value:任意类型的值,
        writable:true | false
    });
    //对象新添加的属性的特性描述
    Object.defineProperty(obj,"newKey",{
        configurable:true | false,
        enumerable:true | false,
        value:任意类型的值,
        writable:true | false
    });
    
    

    数据描述中的属性都是可选的,来看一下设置每一个属性的作用。

    value

    属性对应的值,可以使任意类型的值,默认为undefined

    var obj = {}
    //第一种情况:不设置value属性
    Object.defineProperty(obj,"newKey",{
    
    });
    console.log( obj.newKey );  //undefined
    ------------------------------
    //第二种情况:设置value属性
    Object.defineProperty(obj,"newKey",{
        value:"hello"
    });
    console.log( obj.newKey );  //hello
    
    

    writable
    属性的值是否可以被重写。设置为true可以被重写;设置为false,不能被重写。默认为false。

    var obj = {}
    //第一种情况:writable设置为false,不能重写。
    Object.defineProperty(obj,"newKey",{
        value:"hello",
        writable:false
    });
    //更改newKey的值
    obj.newKey = "change value";
    console.log( obj.newKey );  //hello
    
    //第二种情况:writable设置为true,可以重写
    Object.defineProperty(obj,"newKey",{
        value:"hello",
        writable:true
    });
    //更改newKey的值
    obj.newKey = "change value";
    console.log( obj.newKey );  //ch
    
    

    enumerable
    此属性是否可以被枚举(使用for…in或Object.keys())。设置为true可以被枚举;设置为false,不能被枚举。默认为false。

    var obj = {}
    //第一种情况:enumerable设置为false,不能被枚举。
    Object.defineProperty(obj,"newKey",{
        value:"hello",
        writable:false,
        enumerable:false
    });
    
    //枚举对象的属性
    for( var attr in obj ){
        console.log( attr );  //console不出来
    }
    //第二种情况:enumerable设置为true,可以被枚举。
    Object.defineProperty(obj,"newKey",{
        value:"hello",
        writable:false,
        enumerable:true
    });
    
    //枚举对象的属性
    for( var attr in obj ){
        console.log( attr );  //newKey
    }
    
    

    configurable
    是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。

    这个属性起到两个作用:

    目标属性是否可以使用delete删除

    目标属性是否可以再次设置特性

    //-----------------测试目标属性是否能被删除------------------------
    var obj = {}
    //第一种情况:configurable设置为false,不能被删除。
    Object.defineProperty(obj,"newKey",{
        value:"hello",
        writable:false,
        enumerable:false,
        configurable:false
    });
    //删除属性
    delete obj.newKey;
    console.log( obj.newKey ); //hello
    
    //第二种情况:configurable设置为true,可以被删除。
    Object.defineProperty(obj,"newKey",{
        value:"hello",
    
    

    除了可以给新定义的属性设置特性,也可以给已有的属性设置特性

    //定义对象的时候添加的属性,是可删除、可重写、可枚举的。
    var obj = {
        test:"hello"
    }
    
    //改写值
    obj.test = 'change value';
    
    console.log( obj.test ); //'change value'
    
    Object.defineProperty(obj,"test",{
        writable:false
    })
    
    
    //再次改写值
    obj.test = 'change value again';
    
    console.log( obj.test ); //依然是:'change value'
    
    

    提示:一旦使用Object.defineProperty给对象添加属性,那么如果不设置属性的特性,那么configurable、enumerable、writable这些值都为默认的false

    var obj = {};
    //定义的新属性后,这个属性的特性中configurable,enumerable,writable都为默认的值false
    //这就导致了neykey这个是不能重写、不能枚举、不能再次设置特性
    //
    Object.defineProperty(obj,'newKey',{
    
    });
    
    //设置值
    obj.newKey = 'hello';
    console.log(obj.newKey);  //undefined
    
    //枚举
    for( var attr in obj ){
        console.log(attr);
    }
    
    

    2. 什么是setter、getter

    答:首先,别误以为他们就是一会要说的get、set
    对象有两种属性:

    1. 数据属性: 就是我们经常使用的属性
    2. 访问器属性: 也称存取器属性(存取器属性就是一组获取和设置值的函数)
      再看一行代码:

    在这里插入图片描述
    log打印出来的如下:
    在这里插入图片描述
    数据属性就是a和b;

    get和set就是关键字 它们后面各自对应一个函数,这个函数就是上面红字部分所讲的,存储器属性。

    get对应的方法称为getter,负责获取值,它不带任何参数。set对应的方法为setter,负责设置值,在它的函数体中,一切的return都是无效的。

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

    千次阅读 2020-03-18 20:53:29
    MVVM MVVM全称是Model View ViewModel MVVM 由三部分组成分别是: M:Model ...我们需要在View中声明View(视图)上所显示的东西 与Model的哪部分的数据进行绑定。在ViewModel更新Model上的数据时,...
  • vue双向数据绑定原理

    2021-04-29 19:09:20
    vue双向数据绑定原理 一、原理 vue双向数据绑定是通过数据劫持结合发布订阅者模式的方式来实现的,也就是说数据和视图同步,数据发生变化,试图跟着变化,数据也随之发生改变 核心:关于vue的数据绑定,其核心是 ...
  • 主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 双向数据绑定原理 实现原理 mvvm的双向绑定,是采用数据劫持结合发布者-订阅者模式的方式, vue双向数据绑定,其核心是 Object.defineProperty()方法。 通过Object.defineProperty()来劫持各个属性的setter,...
  • MVVM模式 ...双向绑定原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。 实现数据双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性
  • Vue双向数据绑定原理解析及代码实现

    万次阅读 多人点赞 2018-04-30 20:08:00
    今天,看了一篇关于Vue双向绑定的博客,自己也照着博客进行了深入学习,并自己手动撸了一遍,发现对于vue的双向绑定——数据劫持+(订阅者/发布者)模式有了自己的一些理解! 这篇文章可能会很长,但是相信我,你看...
  • 主要为大家详细介绍了Vue数据双向绑定底层实现原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:...
  • vue双向数据绑定原理,简单实现。 实现流程: 首先通过一个Observer(监听器或者劫持器)去劫持data对象中的所有属性,方法就是使用Object.defineProperty()中的getter/setter,在属性set的时候通知Dependency(订阅...
  • label> 重置button> form> <h4> 我的名字叫:<span v-text="name">span>,我有一辆<span v-html="car.color">span>的<span v-text="car.name">span> h4> div> <script> /* 原理数据劫持 思路: 1. 遍历数据,并...
  • VUE双向数据绑定原理

    2019-06-04 16:08:37
    VUE借助Object.defineproperty()劫持对象的set个get方法实现了数据双向绑定。 看看这个简单的demo: var keyValue = 1; var observeObj = {}; // param1:劫持的对象; param2:需要劫持的key值; param3:对象...
  • 受疫情影响,今年各行业不景气,各岗位的跳槽...(一)Vue2双向数据绑定原理 简单理解: vue2数据双向绑定是由数据劫持结合发布-订阅的模式实现的,通过object.defineProperty()来劫持对象属性的getter和setter操作,

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,956
精华内容 5,982
关键字:

vue双向数据绑定的原理

vue 订阅