今天给各位分享vue3响应式原理视频讲解的知识，其中也会对vue3实现原理进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
- 1、【Vue3】响应式原理
- 2、vue3响应式数据原理
- 3、【手把手教你搓Vue响应式原理】（一）初识Vue响应式
- 4、聊一聊 Vue3 中响应式原理
- 5、【手把手教你搓Vue响应式原理】（五） Watcher 与 Dep
【Vue3】响应式原理
答：数据是可以进行观测的，也就是说在读取和设置的时候可以劫持它来做其他操作；
注意：数据响应式和视图更新是没有关系的！！！响应式只是一种机制，一种数据变化的侦测机制，实现这种机制的方法也不是唯一的，就例如vue2和vue3实现响应式的方法是不同的
vue3响应式数据原理
Effect 原理解析 与 实现
引言：
vue、react 框架的核心都是数据驱动视图也就是model = view,实现的核心也就是 数据响应。
主要就三步：
一、effect：副作用函数
1.类似于vue2.0中watch 的升级版，如果函数中用到的响应式的数据发生了变化，则会执行该函数
二、proxy 与reflect
Object.defineProperty API 的一些缺点：
vue3源码的调试方法：
三、响应式api reactive的实现
三、Effect的依赖收集与响应触发 (分-总-分-问题)
【手把手教你搓Vue响应式原理】（一）初识Vue响应式
在讲这个之前，首先要明白一点，这个所谓的响应式，其实本身就是对 MVVM 的理解。
MVVM 其实就是所谓的 Modal View ViewModal 。
简单理解，就是你的 data 中的数据，和 template 模板中的界面，本身就是两个东西。
但是， Vue 给你做了一层中间的 ViewModal ,让视图上的改变能反映到 data 中， data 中的改变能反映到视图上。
在这个反映过程中，ViewModal就是视图和数据的一个桥梁。
同样是让 a + 1 。
在 Vue 中，这个桥梁是你看不见的，因为 Vue 都帮你完成了视图和数据的变化传递。
而 React 就是侵入式的，因为要显式地声明 setState ，通过它，来设置变量的同时，设置视图的改变。
所以，所谓的侵入式，其实就是对于桥梁的侵入。
所以， Vue 的神奇之处就在于，不需要我们手动地显示调用 setState ，也就是这个桥梁， Vue 已经帮我们桥接上了。
要让 data 改变的同时，视图也发生改变，所以，问题的所在，就是我们需要监听，什么时候，这个变量发生了变量。
然而， ES5 中，就有那么一个特性，可以做到对于数据的劫持（监听）。
它就是 Object.defineProperty 。
Object.defineProperty( obj, prop, descriptor ) 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象，与此同时，它可以对 对象的一些额外底层的属性进行设置 。例如可以设置 writable ， enumerable , configurable 等属性。
后面的额外属性设置，才是我们使用它的重点。
但是，我们使用的不是上面的几个属性，最主要的还是它的 get set ，可以对属性值的获取和设置操作进行拦截。
get主要是可以对值的获取进行拦截，，它必须要传入一个 return ，并且， 该函数的返回值会被用作属性的值 。我们可以来看一个例子:
由于设置了 get ，所以，输出 a.name 的时候直接会被拦截，走 get() 中的 return 所以，此时， a.name 的值应该是 你已经被拦截了!。
set主要是可以对值的设置进行拦截，该方法会接受一个参数，那就是 被赋予的新值 。我们可以来看一个例子:
由于设置了 set ，所以，设置值的时候会被拦截，走 set() 中的方法。
所以， Vue 能自动获取data中的改变，反映到视图的原因，就是有对于变量的获取和设置的劫持，当变量发生改变的同时， Vue 能在第一时间知道，并且对视图做出相应的改变操作。
而这把钥匙就是 Object.defineProperty 。
【尚硅谷】Vue源码解析之数据响应式原理
Object.defineProperty() - MDN
聊一聊 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响应式原理】（五） 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响应式原理视频讲解和vue3实现原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
