vue实现双向绑定原理（vue数据双向绑定的原理+响应式原理）

本文目录

• vue数据双向绑定的原理+响应式原理
• Vue3的双向绑定是如何实现的
• vue双向绑定原理
• vue中数据双向绑定的原理是什么
• vue的数据双向绑定是怎么实现的
• Vue双向数据绑定原理分析 -- Dep(发布者，订阅收集器)
• 理解VUE2双向数据绑定原理和实现
• vue数据双向绑定原理
• 前端面试被问到，vue实现数据双向绑定，原理是啥

vue数据双向绑定的原理+响应式原理

***隐藏网址***
双向绑定：
数据变化更新视图 view =》 model 利用Object.defineProperty的get、set函数对数据更改、读取进行监听。如果数据改变就通知watcher进行重新渲染页面
视图变化更新数据 model =》 view 利用事件监听，通过target.value拿到新值赋值给data

数据变化更新视图关键在于 如何知道数据发生了变化，数据变化了通知视图进行更新
让数据变得能监测，需要使用Object.defineProperty中的get、set函数
let car = {}
let val = 3000
Object.defineProperty(car, ’price’, {
get(){
console.log(’price属性被读取了’)
return val
},
set(newVal){
console.log(’price属性被修改了’)
val = newVal
}
})
car.price = 4000 设置属性值会进入set方法
console.log(car.price) 读取属性值会进入get方法
Object.defineProperty通过对数据读取和设置进入的get、set函数对数据进行了监听

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

思考：
get函数好像意义不大
发布者、订阅者不能很好理解

Vue3的双向绑定是如何实现的

Vue 的双向绑定是指数据变化能引起界面的变化，界面数据的变化也能驱动数据的改变。

这个功能其实和单向数据流规范不一样，所以开始接触 Vue 的时候非常吸引我的一个功能。我们发现 Element UI 的表单也有大量使用 v-model 进行双向绑定。

双向绑定 其实 不是所有的 元素/组件 都支持的，目前 Vue 支持 input ， select , checkbox , radio 和组件 利用 v-model 指令进行 双向绑定。

我以前对 双向绑定 这个功能有很大的一个疑惑：就是 双向绑定 为什么不会造成更新死循环？即 界面变化 -》 数据变化 -》 界面变化 -》 数据变化 -》 ...

由于不同的表单元素使用的内部指令是不一样的，我们就用 input 作为例子进行分析，其他的表单元素的双向绑定原理非常类似。

这一节涉及到 指令 和 事件处理 相关的知识点，如果不是太清楚的话，建议参阅我前面的两篇相关内容，否则有可能会有一些的疑惑。

input 输入数据 -》 数据处理 -》 调用 onUpdate:modelValue 对应的 $event =》 (inputValue = $event) 方法 -》 响应式数据变化触发组件更新 -》 input 设置新值 input.value = newValue 更新至此终止 。

指令的更新有两个方法： beforeUpdate 和 updated 。
在 beforeUpdate 中执行有两个优势：

其实等同于:

vue双向绑定原理

具体步骤：

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

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

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

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

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

1、v-model是什么?怎么使用? vue中标签怎么绑定事件?

答：可以实现双向绑定，指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件：

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

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，其中比较关键的是数据劫持，下面咱们看一个例子。

var obj = {} Object.defineProperty(obj,’name’,{    get:function(){        console.log("获取了");           },    set:function(){        console.log(’修改了’);    }})obj.name = ’fei’;obj.name

Object.defineProperty( )是用来做什么的？它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举。

思路分析

实现mvvm主要包含两个方面，数据变化更新视图，视图变化更新数据：

三人行慕课

关键点在于data如何更新view，因为view更新data其实可以通过事件监听即可，比如input标签监听 ’input’ 事件就可以实现了。所以我们着重来分析下，当数据改变，如何更新视图的。

数据更新视图的重点是如何知道数据变了，只要知道数据变了，那么接下去的事都好处理。如何知道数据变了，其实上文我们已经给出答案了，就是通过Object.defineProperty(
)对属性设置一个set函数，当数据改变了就会来触发这个函数，所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view了。

三人行慕课

思路有了，接下去就是实现过程了。

实现过程

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

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

流程图如下：

三人行慕课

function objServer(obj){     let keys = Object.keys(obj);    keys.forEach((item)=》{          definedActive(obj,item,obj)    })        return obj; } function definedActive(obj,item,val){    Object.defineProperty(obj,item,{        get(){            console.log(`${item}获取了`)        },        set(newVlaue){            val = newVlaue;           console.log(`${item}修改了`)        }    })}  let obj = objServer({    a:1,    b:2}) obj.aobj.b obj.a = 2;obj.b = 3;

vue的数据双向绑定是怎么实现的

vue的数据双向绑定是通过数据劫持和发布－订阅者功能来实现的。

实现步骤：

1.实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者。

2.实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图。

3.实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者。

观察者模式确实很有用，但是在javascript实践里面，通常我们使用一种叫做发布／订阅模式的变体来实现观察者模式。

从图中也能看到，这两种模式很相似，但是也有一些值得注意的不同。

发布／订阅模式使用一个主题／事件频道，这个频道处于想要获取通知的订阅者和发起事件的发布者之间。这个事件系统允许代码定义应用相关的事件，这个事件可以传递特殊的参数，参数中包含有订阅者所需要的值。

观察者模式和发布订阅模式的不同点：

观察者模式要求想要接受相关通知的观察者必须到发起这个事件的被观察者上注册这个事件。

发布／订阅模式使用一个主题／事件频道（类似于中介／中间商），可以减少订阅者和发布者之间的依赖性。

发布／订阅模式中订阅者可以实现一个合适的事件处理函数，用于注册和接受由发布者广播的相关通知。

Vue双向数据绑定原理分析 -- Dep(发布者，订阅收集器)

Dep是Observer与Watcher之间的纽带，也 可以认为Dep是服务于Observer的订阅系统 。Watcher订阅某个Observer的Dep，当Observer观察的数据发生变化时，通过Dep通知各个已经订阅的Watcher。
Dep提供了几个接口：

addSub 和 depend这两个方法是用来关联Watcher实例和Dep实例的，这两种实例的关系是多对对的关系：

•  一个Dep实例可以关联多个Watcher实例

•  一个Watcher实例可以关联多个Dep实例
除了这些接口以外，Dep定义了两个实例属性和一个静态属性：
以上这些都很容易理解，难的在于dep.js里面还定义了一个targetStack的东西：

笔者本着求知的精神，千辛万苦终于找到了大神的讲解：

到此为止，我们就明白了Dep类的实现原理，下一篇我们将了解Watcher类的实现。

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

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

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

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

这样我们就能实现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 劫持数据一下后

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

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

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

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

创建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，另一个等到任务三再说。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

vue数据双向绑定原理

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

首先我们为每个vue属性用Object.defineProperty()实现数据劫持，在监听数据的过程中，为每个属性分配一个订阅者集合的管理数组dep；然后在编译的时候在该属性的数组dep中添加订阅者 watcher，v-model会添加一个订阅者，{{}}也会，v-bind也会，只要用到该属性的指令理论上都会，接着为input会添加监听事件，修改值就会为该属性赋值，触发该属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各订阅者的update方法更新视图。

实现步骤：修改输入框内容 =》 在事件回调函数中修改属性值 =》 触发属性的 set 方法=》发出通知 dep.notify() =》 触发订阅者的 update 方法 =》 更新视图。

流程图 ：

在实例化一个Vue对象的时候，会传进去一个data对象，之后分成两个进程，一个进程是对挂载目标元素模板里的v-model和{{ }}；两个指令进行编译。另一个进程是对传进去的data对象里面的数据进行监听。

上图中，observe是利用Object.defineProperty()对传入的data对象进行数据监听，在数据改变的时候触发该属性的set方法，更新该属性的值，并发布消息，我（该属性）的值变了。

compile是编译器，找到vue的指令v-model所在的元素，将data中该属性的值赋给元素的value，并给这个元素添加二级监听器，在元素的值改变的时候，将新值赋给data里面同名属性，这个时候就完成了单向数据绑定，视图 》》 模型。

那么最终的由模型到视图的更新，依赖于dep和watcher，dep会收集订阅者，就是绑定了data里面属性的元素，在数据更新的时候，会触发该属性的set方法，在set里触发该属性的消息发布通知函数。而Watcher根据收到的数据变化通知，更新相应的数据。

dep这个东东给大家解释一下，就是data里的每个属性都有一个dep对象，dep对象里可以有很多订阅者（watcher），但是只有一个添加订阅者的方法和一个发布变化通知的方法，就是模板上可以有多处元素绑定data里的同一个属性值，所以dep是依赖于data里面的属性的。

而Watcher是每个{{ }}有一个，初次编译的时候，会在new的时候自动更新一下模板的数据，等到下次数据改变的时候，由dep通知数据更新，直接调用watcher的update方法，更新模板的绑定数据。

observer 模块共分为这几个部分：

示意图如下：

Observer的构造函数

value是需要被观察的数据对象，在构造函数中，会给value增加 ob 属性，作为数据已经被Observer观察的标志。如果value是数组，就使用observeArray遍历value，对value中每一个元素调用observe分别进行观察。如果value是对象，则使用walk遍历value上每个key，对每个key调用defineReactive来获得该key的set/get控制权。

Dep是Observer与Watcher之间的纽带，也可以认为Dep是服务于Observer的订阅系统。Watcher订阅某个Observer的Dep，当Observer观察的数据发生变化时，通过Dep通知各个已经订阅的Watcher。

Watcher是用来订阅数据的变化的并执行相应操作（例如更新视图）的。Watcher的构造器函数定义如下：

参数中，vm表示组件实例，expOrFn表示要订阅的数据字段（字符串表示，例如a.b.c）或是一个要执行的函数，cb表示watcher运行后的回调函数，options是选项对象，包含deep、user、lazy等配置。

Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义属性的对象） prop （要定义或修改的属性的名称或 Symbol ） descriptor （要定义或修改的属性描述符=》具体的改变方法）

简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

主要解释第三个参数 {
value: 设置属性的值
writable: 值是否可以重写。true | false
enumerable: 目标属性是否可以被枚举。true | false (就是能不能被遍历出来)
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
set: 目标属性设置值的方法
get：目标属性获取值的方法
}

set 是一个函数，接收一个新值，会在值被重写或修改的时候触发这个函数
get 是一个函数，返回一个值，会在属性被调用的时候触发。

注 ：
Object.defineProperty()详解
Object.defineProperty()官方文档

已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，那么在设置或者获取的时候我们就可以在get或者set方法里假如其他的触发函数，达到监听数据变动的目的。

我们知道通过Object.defineProperty()可以实现数据劫持，它的属性在赋值的时候触发set方法，

当然要是这么粗暴，肯定不行，性能会出很多的问题。

observer用来实现对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知订阅者，订阅者会触发它的update方法，对视图进行更新。

为什么要订阅者 ：在vue中v-model，v-name，{{}}等都可以对数据进行显示，也就是说假如一个属性都通过这三个指令了，那么每当这个属性改变的时候，相应的这个三个指令的html视图也必须改变，于是vue中就是每当有这样的可能用到双向绑定的指令，就在一个Dep中增加一个订阅者，其订阅者只是更新自己的指令对应的数据，也就是v-model=’name’和{{name}}有两个对应的订阅者，各自管理自己的地方。每当属性的set方法触发，就循环更新Dep中的订阅者。

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

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

2.实现compile： compile的目的就是解析各种指令称真正的html。

这样一来就实现了vue的数据双向绑定。

参考链接：
理解VUE双向数据绑定原理和实现---赵佳乐
Vue的双向数据绑定原理
vue双向绑定原理分析
Vue原理解析之observer模块
深入响应式原理

前端面试被问到，vue实现数据双向绑定，原理是啥

其原理大致是这样：
在数据渲染时使用prop渲染数据
将prop绑定到子组件自身的数据上，修改数据时修改自身数据来替代prop
watch子组件自身数据的改变，触发事件通知父组件更改绑定到prop的数据
这样做的好处是：父组件数据改变时，不会修改存储prop的子组件数据，只是以子组件数据为媒介，完成对prop的双向修改。