精华内容
下载资源
问答
  • 当然对这个问题,不同的面试官可能会有不同的问法,比如,直接提问 Vue 中数据双向绑定的原理是什么,提问 v-model 的实现原理是什么,提问 Vue 是如何实现当我们更新数据时能够实现页面响应式渲染的,等等。...

    Vue 中数据双向绑定的实现原理是面试过程中经常被问到的问题,因为聊这部分问题的时候,面试官可以通过你的表达,大概了解你对 Vue 的研究到达了哪个程度。

    当然对这个问题,不同的面试官可能会有不同的问法,比如,直接提问 Vue 中数据双向绑定的原理是什么,提问 v-model 的实现原理是什么,提问 Vue 是如何实现当我们更新数据时能够实现页面响应式渲染的,等等。

    简单理解

    表单元素中可以使用 v-model 来实现数据双向绑定,或者组件上也可以使用 v-model 来创建双向绑定。当然 v-model 是语法糖,在内部为不同的表单元素使用不同的属性并绑定不同的事件处理程序来实现双向绑定,如 texttextarea 元素使用 value 属性与 input 事件,checkboxradio 元素使用 checked 属性与 change 事件,select 元素使用 value 属性与 change 事件来实现双向绑定。

    如果是在组件上使用 v-model 来创建双向绑定,则 v-model 相当于是这样的:

      v-bind:value="searchText"  v-on:input="searchText = $event">

    为了让这个组件正常工作,组件内的 必须:

    • 将其 value 属性绑定到一个名叫 value 的 prop 上
    • 在其 input 事件被触发时,将新的值通过自定义的 input 事件抛出

    即组件定义的代码应该是:

    Vue.component('custom-input', {  props: ['value'],  template: `          v-bind:value="value"      v-on:input="$emit('input', $event.target.value)"    >  `})

    这就实现了组件中 v-model 的双向绑定:

    <custom-input v-model="searchText">custom-input>

    当然,以上这些是对双向绑定的简单的理解,如果这么回答,不一定会让面试官满意,可能你只是对 Vue 的文档比较熟悉一点而已。

    所以如果这不是面试官想要知道的结果,可能他会停顿一会,让你继续说下去,或是也可能会追问:然后呢?

    然后我们就可以深层次的聊聊,比如数据劫持,发布-订阅模式了。

    底层原理

    Vue 实现数据双向绑定的底层原理主要是:采用数据劫持结合发布-订阅模式的方式,通过 Object.defineProperty() 来劫持各个属性的 getter/setter,在数据变动时发布消息给订阅者,触发相应监听回调。

    3228fc5ea062e4b5518e797d1d431486.png

    当把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项时,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把它们全部转为 getter/setter

    这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property 被访问和修改时通知变更。

    每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖,之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

    上图是 Vue 官方深入响应式原理中关于如何追踪变化的示意图,当中有些原理的细节还未完全体现,但如果能够将这张图解释清楚,对双向绑定的原理的理解自然也会更深入了。

    当然对于原理深层次的实现,不是三言两语能够说清楚的,下面是实际实现的大概流程:

    48aacbb80620b4351a346c05f930a807.png

    对该流程中具体的实现,可参考我的博客中《自定义 MVVM 库》一文详细了解。大家可以访问 http://itrainhub.github.io/ 查看。

    展开全文
  • Vue数据双向绑定的原理解析 思路     所谓MVVM数据双向绑定,即主要是:数据变化更新视图,视图变化更新数据。如图  也就是说,输入框内容变化时,data 中的数据同步变化。即 view —> model 的变化。data ...

    Vue数据双向绑定的原理解析

    思路
        所谓MVVM数据双向绑定,即主要是:数据变化更新视图,视图变化更新数据。如图
    在这里插入图片描述
     也就是说,输入框内容变化时,data 中的数据同步变化。即 view —> model 的变化。data 中的数据变化时,文本节点的内容同步变化。即 model —> view 的变化
    原理
        Vue 实现的双向数据绑定,是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。要实现mvvm的双向绑定,就必须要实现以下几点:
        Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象
    在这里插入图片描述
     1. 实现一个数据监听器 Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
      2. 实现一个指令解析器 Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
      3. 实现一个 Watcher,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
      4. 将 MVVM 作为数据绑定的入口,整合 Observer,Compile 和 Watcher 三者
    实现简单的双向绑定数据

    <body>
    <input type="text" id="inp">
    <div id="demo"></div>
    <script>
    	var demo = document.querySelector('#demo')
    	var inp = document.querySelector('#inp')
    	
    	let obj = {}
    	
    	inp.addEventListener('input', function(e) {
    	    // 给 obj 的 name 属性赋值,进而触发该属性的 set 方法
    	    obj.name = e.target.value
    	})
    	
    	Object.defineProperty(obj, 'name', {
    		set: function(newVal) {
    			inp.value = newVal
    	        demo.innerHTML = newVal
    	        console.log('更新了obj的name:' + newVal)   // name 属性值被修改时触发
    	    },
    	    get: function() {
    	        console.log('获取obj数据name')
    	    }
    	})
    		
    	obj.name    // 获取 data 数据 name
    </script>
    </body>
    

    加油,陌生人!(来来往往不陌生,希望对你有帮助)

    展开全文
  • vue数据双向绑定的原理 vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者 数据劫持 Object.defineProperty() 当...

    vue数据双向绑定的原理

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

    数据劫持

    Object.defineProperty()

    当我们访问或设置对象的属性的时候,都会触发相对应的函数,然后在这个函数里返回或设置属性的值。

    既然如此,我们当然可以在触发函数的时候动一些手脚做点我们自己想做的事情,这也就是“劫持”操作。

    在Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作,并“种下”一个监听器,当数据发生变化的时候发出通知。

    语法

    Object.defineProperty(obj,prop,descriptor)

    参数

    obj:目标对象

    prop:需要定义的属性或方法的名称

    descriptor:目标属性所拥有的特性

    可供定义的特性列表

    value:属性的值

    writable:如果为false,属性的值就不能被重写。

    get: 一旦目标属性被访问就会调回此方法,并将此方法的运算结果返回用户。

    set:一旦目标属性被赋值,就会调回此方法。

    configurable: 如果为false,则任何尝试删除目标属性或修改属性性以下特性(writable, configurable, enumerable)的行为将被无效化。

    enumerable: 是否能在for…in循环中遍历出来或在Object.keys中列举出来。

    发布者-订阅者模式

    假如用户A订阅了 某一个公众号G,那么当公众号G推送消息的时候,用户A就会收到相关的推送,点开可以查看推送的消息内容。
    但是公众号G并不关心订阅的它的是男人、女人还是二哈,它只负责发布自己的主体,只要是订阅公众号的用户均会收到该消息。
    作为用户A,不需要时刻打开手机查看公众号G是否有推动消息,因为在公众号推送消息的那一刻,用户A就会收到相关推送。
    当然了,用户A如果不想继续关注公众号G,那么可以取消关注,取关以后,公众号G再推送消息,A就无法收到了。

    展开全文
  • Vue实现数据双向绑定的原理 (一)Vue实现数据双向绑定主要是:采用数据劫持结合发布者–订阅者模式的方式,通过object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的...

    Vue实现数据双向绑定的原理

    (一)Vue实现数据双向绑定主要是:采用数据劫持结合发布者–订阅者模式的方式,通过object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。当把一个普通JavaScript对象传给Vue实例来作为它的data选项时,Vue将遍历他的属性Property,用object.defineProperty将它们(Property)转为getter/setter。用户看不到getter/setter,但是在内部它们让Vue追踪依赖,在属性被访问和修改时通知改变。

    (二)Vue的数据双向绑定将MVVM作为数据绑定的入口,整合observer,compile和watch三者,通过observer监听自己的model的数据变化,通过compile来解析编译模板指令(vue中是用来解析{{}}),最终利用watcher搭起observer和compile之间的通信桥梁,达到数据变化->视图更新。视图交互变化(input)->数据model变更双向绑定效果。

    展开全文
  • 数据双向绑定的原理 var inputText = document.querySelector('#input') var h1 = document.querySelector('h1') var h3 = document.querySelector('#username') var age = document.querySelector('#age') ...
  • vue 数据双向绑定的原理 VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象**获取属性值(get)和设置属性值(set)**的操作来实现的。 它会接收三个参数 第一个参数:定义属性的...
  • 说说vue数据双向绑定的原理。 解析 Vue实现数据双向绑定的原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性...
  • vue实现数据双向绑定的原理:就是用 Object.defineproperty() 重新定义对象 设置属性值 (set方法)和 获取属性值(get方法)的操纵来实现的 描述: Object.defineProperty()方法会直接在一个对象上定义一个新属性...
  • vue数据双向绑定的原理https://www.cnblogs.com/libin-1/p/6893712.html 虚拟dom的原理https://blog.csdn.net/u010692018/article/details/78799335/,https://segmentfault.com/a/1190000013469565 转载于:...
  • 面试总结:vue实现数据双向绑定的原理

    万次阅读 多人点赞 2018-09-27 23:56:48
    vue实现数据双向绑定的原理就是用Object.defineproperty()重新定义(set方法)对象设置属性值和(get方法)获取属性值的操纵来实现的 Object.property()方法的解释:Object.property(参数1,参数2,参数3) 返回值...
  • 前段时间疫情在家的时候,视频面试,面试官问了我一个问题“vue数据双向绑定的原理”,我毫不犹豫地回答到v-model,至于原理我没答出来,自然,这个offter也没能拿到,今天,就来讨论一下vue数据双向绑定的原理到底...
  • 首先简述一下什么是数据双向绑定数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。 vue实现双向数据绑定的原理,其实就是利用了 Object.defineProperty() ...
  • 第一次写,CSDN博客,希望这篇文章对大家的学习有所...vue实现双向绑定的原理是数据劫持结合发布订阅模式和Object.defineProperty中的get和set方法实现的。 自己实现一个数据双向绑定 主要思路是先的定义一个对象...
  • vue的数据双向绑定是通过数据劫持和发布-订阅者功能来实现 实现步骤: 1.实现一个监听者Oberver来劫持并监听所有属性,一旦有属性发生变化就通知订阅者 2.实现一个订阅者watcher来接受属性变化通知并执行相应...
  • Vue数据双向绑定的原理

    千次阅读 2018-03-27 17:05:31
    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式方式来实现。 双向绑定就是视图上变化能够反映到数据上,数据上变化也能反映到视图上。如下图所示: 关键点在于data如何...
  • vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式方式,通过Object.defineProperty()来劫持各个属性setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript...
  • vue最独特的特性之一,是其非侵入性的响应式系统。...1、vue中数据双向绑定的体现 {{ msg }} <div > <p>v-model属于vue中表单数输入的一个指令,实质是一个属性,属性的值是一个变量 m...
  • vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式方式。 Object.defineProperty()来劫持各个属性setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript ...
  • 当然对这个问题,不同的面试官可能会有不同的问法,比如,直接提问 Vue 中数据双向绑定的原理是什么,提问 v-model 的实现原理是什么,提问 Vue 是如何实现当我们更新数据时能够实现页面响应式渲染的,等等。...
  • 一、双向绑定的原理 vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当...
  • vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式方式,通过**Object.defineProperty()**来劫持各个属性setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,669
精华内容 1,067
关键字:

数据双向绑定的原理