本篇文章给大家谈谈vue2数据响应式原理，以及vue3响应式数据对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、【手把手教你搓Vue响应式原理】（五） Watcher 与 Dep
• 2、聊一聊 Vue3 中响应式原理
• 3、深入理解和手写--Vue响应式原理/剖析Dep与Wacher关系
• 4、理解VUE2双向数据绑定原理和实现
• 5、Vue响应式原理(Object.defineProperty)全过程解析

【手把手教你搓Vue响应式原理】（五） Watcher 与 Dep

【手把手教你搓Vue响应式原理】（一）初识Vue响应式

【手把手教你搓Vue响应式原理】（二）深度监测对象全部属性

【手把手教你搓Vue响应式原理】（三）observe 以及 ob

【手把手教你搓Vue响应式原理】（四） 数组的响应式处理

之前已经将数据劫持已经全部完成了。

那么，接下来，主要的要点就是在于两点，依赖收集和触发依赖更新。

它的意义主要在于控制哪些地方使用了这个变量，然后，按照最小的开销来更新视图 。

首先，要先明白，依赖是什么，比方说在我们的模板中有 {{a}} ，那么，这个地方就有对于变量 a 的依赖。

在模板编译的时候，就会触发 a 变量的 getter 。

然后，当我们执行 a++; 的时候，那么，我们就要触发依赖的更新，当初模板中 {{a}} 的地方，就要更新，是吧！

所以，我们都是 在 getter 中收集依赖，在 setter 中触发依赖更新 。

这一节的内容，主要就是用来专门讲清楚这两件事情。

依赖收集和触发依赖更新主要由两个类来完成， Dep 和 Watcher 。

Dep 和 Watcher 在设计模式中，就是 发布-订阅者 的模式。

而依赖，你可以理解为所谓的订阅者。

Dep 说白了就是发布者,它的工作就是依赖管理，要知道哪些地方用到了这个变量，可能用到这个变量的地方有很多，所以，它会有多个订阅者。

然后，每个变量都应该有属于自己的 Dep ，因为每个变量所在的依赖位置是不一样的，所以他们的订阅者也不一样。

然后在变量更新之后，就去通知所有的订阅者（Watcher），我的变量更新了，你们该触发视图更新了。

Watcher 说白了就是订阅者，它接受 Dep 发过来的更新通知之后，就去执行视图更新了。

它其实就是所谓的 watch 监听器，变量改变之后，执行一个回调函数。

我们先按照图例来创建我们的 Dep 类

根据我们的需求:

Dep 我们在前面也说了，每个属性都应该有它自己的 Dep ，用来管理依赖。

所以，首先，如果我们在 Observer 中创建 Dep，那不就可以了。毕竟 Observer 会遍历到每一个对象。

所以，很明显，我们可以在 defineReactive 的 get 中收集依赖

因为有了 if(Dep.target) 的判断，所以， 只有绑定 Watcher 的变量触发 getter 时，才会添加依赖 。

这个 Dep.target 其实就是 Watcher 的实例

所以，很明显，我们可以在 defineReactive 的 set 中收调用 notify() 方法告知 Watcher 实例，数据更新了。

至此， Dep 的所有职责，我们已经帮它完成了。

其实照道理应该有一个删除依赖，我们这里就不再扩展了。

首先， Watcher 实例应该大家会相对而言更加好理解点，因为，我们有一个 watch 侦听器，大家一定都很熟悉，这两个其实一样。

我们先按照图例来创建我们的 Watcher 类

根据我们的需求:

这个 parsePath 需要单独拎出来说一下，比方说我们现在有这么一个对象

我们要监听到 a.b.c.d ，所以，我们需要下面的这种格式

所以，这个 get 很明显就有点难度了。 我们需要通过循环 拿到 a.b 然后 .c 然后 .d。

我们将这个方法命名为 parsePath 。

入参接受我们的 b.c.d ，我们可以看到 第一句执行之后 segments=['b','c','d'] ，然后进行第二层，这是返回了一个方法，按照循环，那就是 obj=obj.b = obj=obj.c = obj=obj.d ，所以，就是返回一个对象的 obj.b.c.d，相当于是遍历字符串中的属性树。

在执行 a.b.c.d=55; 的同时，我们的控制台就会输出 ok 55 10 。

【尚硅谷】Vue源码解析之数据响应式原理

聊一聊 Vue3 中响应式原理

Vue.js 3.0 "One Piece" 正式发布已经有一段时间了，真可谓是千呼万唤始出来啊！

相比于 Vue2.x ， Vue3.0 在新的版本中提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API 。

在发布之前，尤大大就已经声明了响应式方面将采用 Proxy 对于之前的 Object.defineProperty 进行改写。其主要目的就是弥补 Object.defineProperty 自身的一些缺陷，例如无法检测到对象属性的新增或者删除，不能监听数组的变化等。

而 Vue3 采用了新的 Proxy 实现数据读取和设置拦截，不仅弥补了之前 Vue2 中 Object.defineProperty 的缺陷，同时也带来了性能上的提升。

今天，我们就来盘一盘它，看看 Vue3 中响应式是如何实现的。

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object. MDN

Proxy - 代理，顾名思义，就是在要访问的对象之前增加一个中间层，这样就不直接访问对象，而是通过中间层做一个中转，通过操作代理对象，来实现修改目标对象。

关于 Proxy 的更多的知识，可以参考我之前的一篇文章 —— 初探 Vue3.0 中的一大亮点——Proxy ! ，这里我就不在赘述。

Vue3 中响应式核心方法就是 reactive 和 effect ， 其中 reactive 方法是负责将数据变成响应式， effect 方法的作用是根据数据变化去更新视图或调用函数，与 react 中的 useEffect 有点类似~

其大概用法如下：

默认会执行一次，打印 Hello , 之后更改了 data.name 的值后，会在触发执行一次，打印 World 。

我们先看看 reactive 方法的实现~

reactive.js

首先应该明确，我们应该导出一个 reactive 方法，该方法有一个参数 target ，目的就是将 target 变成响应式对象，因此返回值就是一个响应式对象。

reactive 方法基本结构就是如此，给定一个对象，返回一个响应式对象。

其中 isObject 方法用于判断是否是对象，不是对象不需要代理，直接返回即可。

reactive 方法的重点是 Proxy 的第二个参数 handler ，它承载监控对象变化，依赖收集，视图更新等各项重大责任，我们重点来研究这个对象。

handler.js

在 Vue3 中 Proxy 的 handler 主要设置了 get ， set ， deleteProperty ， has ， ownKeys 这些属性，即拦截了对象的读取，设置，删除， in 以及 Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法。

这里我们偷个懒，暂时就考虑 set 和 get 操作。

handler.get()

get 获取属性比较简单，我们先来看看这个，这里我们用一个方法创建 getHanlder 。

这里推荐使用了 Reflect.get 而并非 target[key] 。

可以发现， Vue3 是在取值的时候才去递归遍历属性的，而非 Vue2 中一开始就递归 data 给每个属性添加 Watcher ，这也是 Vue3 性能提升之一。

handler.set()

同理 set 操作，我们也是用一个方法创建 setHandler 。

Reflect.set 会返回一个 Boolean 值，用于判断属性是否设置成功。

完事后将 handler 导出，然后在 reactive 中引入即可。

测试几组对象貌似没啥问题，其实是有一个坑，这个坑也跟数组有关。

如上例子，如果我们选择代理数组，在 setHandler 中打印其 key 和 value 的话会得到 3 4 ， length 4 这两组值：

如果不作处理，那么会导致如果更新视图的话，则会触发两次，这肯定是不允许的，因此，我们需要将区分新增和修改这两种操作。

Vue3 中是通过判断 target 是否存在该属性来区分是新增还是修改操作，需要借助一个工具方法 —— hasOwnProperty 。

这里我们将上述的 createSetter 方法修改如下：

如此一来，我们调 push 方法的时候，就只会触发一次更新了，非常巧妙的避免了无意义的更新操作。

effect.js

光上述构造响应式对象并不能完成响应式的操作，我们还需要一个非常重要的方法 effect ，它会在初始化执行的时候存储跟其有关的数据依赖，当依赖数据发生变化的时候，则会再次触发 effect 传递的函数。

其基本雏形如下，入参是一个函数，还有个可选参数 options 方便后面计算属性等使用，暂时不考虑：

createReactiveEffect 就是为了将 fn 变成响应式函数，监控数据变化，执行 fn 函数，因此该函数是一个高阶函数。

createReactiveEffect 将原来的 fn 转变成一个 reactvieEffect ， 并将当前的 effect 挂到全局的 activeEffect 上，目的是为了一会与当前所依赖的属性做好对应关系。

我们必须要将依赖属性构造成 { prop : [effect,effect] } 这种结构，才能保证依赖属性变化的时候，依次去触发与之相关的 effect ，因此，需要在 get 属性的时候，做属性的依赖收集，将属性与 effect 关联起来。

依赖收集 —— track

在获取对象的属性时，会触发 getHandler ，再次做属性的依赖收集，即 Vue2 中的发布订阅。

在 setHandler 中获取属性的时候，做一次 track(target, key) 操作。

整个 track 的数据结构大概是这样

目的就是将 target ， key ， effect 之间做好对应的关系映射。

打印 targetMap 的结构如下：

**触发更新 —— trigger **

上述已经完成了依赖收集，剩下就是监控数据变化，触发更新操作，即在 setHandler 中添加 trigger 触发操作。

这样一来，获取数据的时候通过 track 进行依赖收集，更新数据的时候再通过 trigger 进行更新，就完成了整个数据的响应式操作。

再回头看看我们先前提到的例子：

控制台会依次打印 Hello ***** effect ***** 以及 World ***** effect ***** ， 分别是首次渲染触发跟更新数据重渲染触发，至此功能实现！

整体来说， Vue3 相比于 Vue2 在很多方面都做了调整，数据的响应式只是冰山一角，但是可以看出尤大团队非常巧妙的利用了 Proxy 的特点以及 es6 的数据结构和方法。另外， Composition API 的模式跟 React 在某些程度上有异曲同工之妙，这种设计模式让我们在实际开发使用中更加的方法快捷，值得我们去学习，加油！

最后附上仓库地址 github ，欢迎各位大佬批评斧正~

深入理解和手写--Vue响应式原理/剖析Dep与Wacher关系

其实从因为单词意思中是依赖，观察;

vue中依赖的意思：数据和模板表达式依赖关系，一 对 多。

vue中观察的意思：模板表达式和数据的关系， 一 对 多。

由于vue要是实现数据和视图双向绑定，必须要监听数据改变，也要监听视图变化，从而定义两个核心对象，Dep对象收集依赖，Wacher对象监听视图 模板表达式。

下面详细介绍两个对象咋样关联的，它们之间到底存在什么联系

| 当数据变化了咋样通知视图更新？ |设置数据 = defineObserve的set方法 = Dep.notify = 遍历watcher.update = 调用传过来的更新节点cb = 从而更新视图最新状态数据 |

注意

理解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响应式原理(Object.defineProperty)全过程解析

忽视掉和响应式数据无关的部分，到这里基本就是mount结束的地方了，总结下都干了什么，触发beforeMount生命周期，new了一个Watcher对象，渲染模板，触发数据的get初始化，对每个响应式数据的Dep实例进行依赖收集，然后触发Mounted生命周期。

大致流程就是这样了，似乎写的有点乱，如有问题欢迎大佬们指正

关于vue2数据响应式原理和vue3响应式数据的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。