精华内容
下载资源
问答
  • vue 双向数据绑定原理

    2019-11-19 14:59:11
    vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式。 分为两个进程,一个进程是对挂载目标元素模板里的v-model和{{ }}这两个指令进行编译(绿色)。另一个进程是对传进去的data对象里面的数据...

    屋里请,沙发坐,满屋的瓜子随便嗑。今天我们接着唠一唠,前端比较重要的面试题,双向数据绑定原理。

    vue中v-model是如何实现的

    Vue双向数据绑定实现原理
    vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式。
    分为两个进程,一个进程是对挂载目标元素模板里的v-model和{{ }}这两个指令进行编译(绿色)。另一个进程是对传进去的data对象里面的数据进行监听(红色)。

    红色:

    • 当你把一个普通的JavaScript对象传给Vue实例的 data 选择,Vue将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部加上set和get访问器,这样在设置data的属性这的时候,会触发set方法,那么set方法主要有两个作用,一是改变data里边的属性值,二是发出数据变化的通知。Observer作为数据的观察者,让数据对象的读写操作都处于自己的监管之下,Dep作为Watcher(订阅器)的收集者,当数据发生变化set会发出通知,会被Observer观察到,然后由Dep通知到Watcher,最后更新视图。

    绿色:

    • 指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,同样由Dep进行收集,然后由Dep通知到Watcher,最后更新视图。

    节点介绍

    • 数据监听器观察者Observer,能够对数据对象的所有属性进行监听,让数据对象的读写操作都处于自己的监管之下,当数据发生变化set会发出通知,会被Observer观察到,然后由Dep通知到Watcher,最后更新视图。
      实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器。Oberser,用来监听所有属性。
    • Watcher将数据监听器和指令解析器连接起来,数据的属性变动时,执行指令绑定的响应回调函数,1.如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。
    • 指令解析器Compile,
      对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher
    • Dep:因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。
    展开全文
  • vue双向数据绑定的原理

    万次阅读 2017-09-04 19:30:02
    有关双向数据绑定的原理 最近两次面试的时候,被问到了vue中双向数据绑定的原理,因为初学不精,只是使用而没有深入研究,所以... 文章链接:vue双向绑定原理及实现 Mozilla 开发者服务:Object.defineProperty...

    有关双向数据绑定的原理

    最近两次面试的时候,被问到了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双向数据绑定原理

    2019-05-17 09:30:51
    这个解答可回答面试中 ① vue双向数据绑定原理 和 ② vue响应原理 问题 基本原理 vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时...

    前言

    这个解答可回答面试中 ① vue双向数据绑定原理② vue响应原理  问题


    基本原理

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

     

    具体步骤:

     

    第一步:

    需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter

    这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化

     

    第二步:

    compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

     

    第三步:

    Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:

    1、在自身实例化时往属性订阅器(dep)里面添加自己

    2、自身必须有一个update()方法

    3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

     

    第四步:

    MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

     

    实现一下双向绑定

    ① 数据劫持 obj.txt ,

    ② input 输入框绑定 onkeyup 事件,改变 obj.txt 的值,触发 setter , 从而引起 $("#txt") 和 $("#show-txt") 的值更新 

    <body>
        <div id="app">
            <input type="text" id="txt">
            <p id="show-txt"></p>
        </div>
        <script>
            var obj = {}
            Object.defineProperty(obj, 'txt', {
                get: function () {
                    return obj
                },
                set: function (newValue) {
                    document.getElementById('txt').value = newValue
                    document.getElementById('show-txt').innerHTML = newValue
                }
            })
            document.addEventListener('keyup', function (e) {
                obj.txt = e.target.value
            })
        </script>
    </body>
    

     

    结束

    如果文章对你有帮助,麻烦点赞哦!一起走码农花路~

     

    展开全文
  • 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;})

     

     

    展开全文
  • 实现mvvm的双向绑定,是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 vue的双向数据绑定整合了...
  • 浅析Vue双向数据绑定

    2020-03-18 21:19:26
    浅析Vue双向数据绑定 双向数据绑定似乎是面试中常出现的问题,那么我们来了解下什么是双向数据绑定,他的原理又是什么。 首先,我们看下他的含义是怎么样定义的:数据双向绑定,首先要对数据进行劫持监听,所以...
  • Vue双向数据绑定原理

    2020-10-27 11:36:11
    Vue双向数据绑定原理 前端面试必问的一道面试题 vue采用MVVM模式,数据劫持结合开发者-订阅者模式,通过Object.defineProperty()劫持各个属性的getter、setter,在数据变动时发布消息给订阅者,触发相应的监听回调。...
  • vue双向数据绑定的原理解析

    千次阅读 多人点赞 2019-06-26 17:13:14
        每当面试官问到Vue数据双向绑定原理的时候,我们都会简单的说:Vue 内部通过 Object.defineProperty 方法属性拦截的方式,把data 对象里每个数据的读写转化成 getter / setter,当数据变化时通知视图更新。...
  • vue.js是采用数据劫持结合发布者-订阅者的模式的方法,通过Object.defineProperty()来劫持各个属性的Getter、setter,在数据变动时发送消息给订阅者。 实现的整个流程 首先为每个vue属性用Object.defineProperty()...
  • 首先,什么是双向数据...Vue双向数据绑定的设计思想为观察者模式。 Dep对象:Dependency依赖的简写,包含有三个主要属性:id,subs,target和四个主要函数addSub,removeSub,depend,notify,是观察者的依赖集合,负责.
  • MVVM模式 MVVM模式就是Model–View–...vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。 实现数据双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性
  • Vue双向数据绑定原理(面试必问)

    千次阅读 2021-01-08 14:26:31
    vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。 具体步骤 需要observer的数据...
  • vue双向数据绑定和底层原理 什么式双向数据绑定 ViewModel对model层进行更新的时候,ViewModel中的Binder会自动地把数据更新到view层上去,当用户操作了view层(例如:表单地输入),ViewModel也会自动地把数据更新到...
  • Vue双向数据绑定

    2017-08-22 18:04:38
    对于Array类型的数据,由于Javasript的限制,vue不能检测到变化,会先重写操作数组的原型方法,当数组变化的时候触发notify方法 对于Object类型的护具,则遍历他的每个key,使用getter和setter,实先在get时收集依赖,set...
  • 导语: 在面试中,我们经常能够被问到,...vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现。 就是以上的这个视图,原理就是当视图层数据发生变化的时候,就会更新data,如果data改变了,就会更新vie
  • vue双向数据绑定

    2021-01-06 14:06:32
    vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。 具体步骤 需要observer的数据...
  •   每当面试官问到Vue数据双向绑定原理的时候,我们都会简单的说:Vue 内部通过 Object.defineProperty 方法属性拦截的方式,把data 对象里每个数据的读写转化成 getter / setter,当数据变化时通知视图更新。...
  • 现在我们平常开发主要用到的技术里,可以看到React和小程序是单向数据流,Vue和Angular是双向数据绑定,Angular用的是脏检测,Vue则是数据劫持和订阅者模式,今天我们来聊聊vue双向数据绑定双向数据绑定无非...
  • 受疫情影响,今年各行业不景气,各岗位的跳槽形势也不是很高。所以趁此机会好好蓄力,...vue2数据双向绑定是由数据劫持结合发布-订阅的模式实现的,通过object.defineProperty()来劫持对象属性的getter和setter操作,

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,500
精华内容 3,000
关键字:

vue双向数据绑定面试

vue 订阅