Vue3 Reactive响应式原理逻辑详解

目录
  • 前言
  • 一、怎么实现变量变化
  • 二、怎么实现变量变化
  • 三、将多个dep存储在Map中
  • 四、将多个object的depsMap继续存储起来
  • 五、核心
  • 六、源码解析（TypeScript）

前言

本篇文章主要讲解vue响应式原理的逻辑，也就是vue怎么从最开始一步步推导出响应式的结构框架。 先从头构建一个简单函数推导出Vue3的Reactive原理，最后再进行源码的验证。

一、怎么实现变量变化

怎么实现变量变化，相关依赖的结果也跟着变化

当原本price=5变为price=20后total应该变为40，但是实际total并不会改变。 解决办法可以这样，当变量改变了，重新计算一次，那么结果就会改变为最新的结果。

如果需要重新计算，我们需要将total语句存储为一个函数，才能实现依赖的变量改变就进行一次依赖项计算。这里就用effect表示函数名。

来，试一下：

，实现了变量price改变，依赖变量price quantity的变量total也发生改变。

下一步，我们要解决的问题是：应该怎么把effect存储起来，让代码更加有通用性，而不是一直复写effect，分离出其他的功能的函数各司其职，也就是大家常说的解耦。

二、怎么实现变量变化

怎么实现变量变化，变量改变后就取出effect执行

用什么存储effect呢？当然是用Set，因为Set会过滤出重复的元素，所以能够保证存储在Set中的函数不是重复的。 这里定义一个存储effect依赖的变量为dep = new Set()，定义track函数表示存储的过程。 定义trigger函数用以取出dep中相关的effect函数执行（这里定义的函数与Vue3源码同名同意义）。

  • effect: 会影响结果的函数（要实现响应式的依赖语句）
  • track:保存所有的effect
  • trigger: 当变量改变重新执行代码

，解耦之后代码结构更清晰了。

下面需要解决的一个问题：一个object通常有多个属性，比如product = { price: 5, quantity: 2 }，在保存依赖时只创建了一个dep的集合，应该给price和quantity都创建dep，因为total的最终结果依赖这两个属性，其中任何一个改变都要触发trigger函数。创建了两个dep就需要一个容器将dep存储起来。

三、将多个dep存储在Map中

因为不同的属性名有自己对应的dep，所以我们用Map结构（键值对形式）来保存不同dep。

，一个object的多个属性依赖问题解决，更具有通用性了。

下一个问题是：不可能只有一个对象，多个对象又怎么办？let product = { price: 5, quantity: 2 } let user = { firstName: "Joe", lastName: "Smith" }，比如两个对象的时候就需要进一步修改上面的代码了。

四、将多个object的depsMap继续存储起来

这里用WeakMap数据结构去存储多个需要响应式的object的depsMap。WeakMap的基本使用和Map差不多，只不过WeakMap只接受对象为键值，而depsMap是一个Map结构刚好（必须是）是对象类型。targetMap作为存储多个depsMap的容器名。

，到这里已经基本实现了通用性的响应式代码了，但是还有最后一个问题就是：我们的代码都需要手动执行（自己添加trigger运行），不能自动运行。怎么让它能够自动检测变量改变，然后自动修改结果呢？

五、核心

通过Reflect和Proxy解决自执行问题

在JavaScript中，自动检测变量不就是get、自动修改变量不就是set吗？在Vue2.x版本中用ES5的Obeject.defineProperty()自带的getter/setter去解决这个问题。ES6中Proxy也能解决这个问题，但是Proxy不兼任IE浏览器，当时大家还讨论过说不知道尤大怎么去考虑这个问题，现在问题的答案就是——不考虑。也就是根本不考虑IE兼不兼容。

Proxy就是代理的意思，任何对真实数据的操作它都能拦截并且代理操作，也就是说Object上一些能实现的方法，Proxy也能实现。Proxy使用语法是new Proxy(target, hanler)，handler是你想实现什么样的代理功能配置。 而Reflect就更神奇了，它的作用是取代Object类上的一些方法让Obeject类更纯粹的代表一个类，不要附加太多方法在上面，比如a in obj表示判断obj中是否有a，在Reflect中用Reflect.has(a)比较语义化的方式就可以代替之前的方法。

正是因为这样，Proxy和Reflect就对应上了，都有Object上的方法。 具体关于Reflect和Proxy的语法可以参考阮一峰大大的 ES6入门教程。

稍微封装一下我们的函数，名叫Reactive

，至此，Vue3基本的响应式原理就解析完了。

六、源码解析（TypeScript）

return了createReactiveObject函数，所以去看createReactiveObject。

前面的代码都是判断各种情况，我们就看最后几行

const observed = new Proxy(
    target,
    collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
  )

可以看到Proxy的handler为collectionHandlers或者 baseHandlers，继续选择一个看一看。

在 baseHandlers中可以看到导出了get/set/deleteProperty等属性配置：

我们看一下set：

和我们之前的逻辑差不多，只不过真正实现就很复杂，因为有很多复杂条件需要去处理。

其他的get等方法也一样，做了很多条件判断处理，完善了每一种会出现的情况。

到此这篇关于Vue3 Reactive响应式原理逻辑详解的文章就介绍到这了,更多相关Vue3 Reactive响应式 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3中reactive不能直接赋值的解决方案

    目录 vue3 reactive不能直接赋值 方法 vue3 reactive赋值不响应 (1)多嵌套一层 (2)使用ref (3)用obeject.assign vue3 reactive不能直接赋值 最近比较忙,都没什么时间学习了. 在vue3里,ref和reacitve都可以定义响应式数据,但是两者有所不同.在使用reactive定义复杂结构的响应式数据时,如果你要对其赋值,会丢失其响应性.然后赋值是我们经常进行的操作,那么该怎么解决呢? 方法 1. 改为ref定义 const arr=

  • 关于vue3中的reactive赋值问题

    目录 vue3 reactive赋值问题 vue3 reactive的坑 清空数组 清空对象 vue3 reactive赋值问题 vue3中直接对reactive整个对象赋值检测不到 let obj = reactive({ name: 'zhangsan', age: '18' }) obj = { name: 'lisi' age: '' } // 上面这样赋值检测不到,因为响应式的是它的属性,而不是它自身 // 如需要对 reactive 赋值 // 方法1: 单个赋值 obj['name

  • Vue3.0中Ref与Reactive的区别示例详析

    目录 Ref与Reactive Ref Reactive Ref与Reactive的区别 shallowRef 与shallowReactive toRaw ---只修改数据不渲染页面 markRaw --- 不追踪数据 toRef --- 跟数据源关联 不修改UI toRefs ---设置多个toRef属性值 customRef ---自定义一个ref ref 捆绑页面的标签 总结 Ref与Reactive Ref Ref 用来创建基础类型的响应式数据,模板默认调用value显示数据.方法中修

  • vue3 关于reactive的重置问题及解决

    vue3 关于reactive的重置问题及解决

    目录 关于reactive的重置问题 理解vue3中的reactive 1.什么是reactive? 2.reactive注意点 关于reactive的重置问题 在vue3的reactive的使用, 有时候需要对里面的数据进行清空处理, 下面推荐一个方法 假如有一个info的reactive的数据 const info = reactive<{ name: string; age: string; gender: string }>({   name: "1",   age

  • vue3中reactive数据被重新赋值后无法双向绑定的解决

    vue3中reactive数据被重新赋值后无法双向绑定的解决

    目录 reactive数据被重新赋值后无法双向绑定 推荐写法 vue3数据的双向绑定 一.script setup 二.ref() 函数 三.reactive()函数 reactive数据被重新赋值后无法双向绑定 这是因为reactive数据被重新赋值后,原来数据的代理函数和最新的代理函数不是同一个,无法被触发 推荐写法 import {reactive, toRefs} from 'vue' setup(props, context) { const state = reactive({ my

  • vue3中的reactive函数声明数组方式

    目录 reacitve函数如何声明一个响应式数组 解决办法 使用reactive包裹数组赋值 需求 代码 reacitve函数如何声明一个响应式数组 如以下案例 <template>   <div>       <div v-for="item in arr" :key="item">            {{item}}       </div>         <button @click="ch

  • vue3+ts中ref与reactive指定类型实现示例

    目录 ref 的基础特性 如何在ref中指定类型 reactive isRef.isReactive toRef.toRefs.toRaw ref 的基础特性 ref 约等于 reactive({ value: x }) ref() 可以定义时无参数,第一次赋值任意类型,然后就不能增加属性 const refa = ref(6) const rcta = reactive({ value: 12 }) console.log('refa:', refa) //RefImpl{...} conso

  • vue3的ref,computed,reactive和toRefs你都了解吗

    目录 1.ref 2.computed 3.reactive 4.toRefs 总结 在vue2中,data函数里返回的值直接为响应式的,但在vue3中我们需要使用一些函数才能达到这个效果. setup函数中拿不到vue的this 1.ref 本质为一个函数,输入参数为一个值(原始类型),返回响应式的对象 2.computed 本质为一个函数,输入参数是一个函数,可以将我们需要的值作为输入函数的返回值 例子:实现点击按钮,屏幕上的数加1 <template> <div id='app'&

  • Vue3 Reactive响应式原理逻辑详解

    Vue3 Reactive响应式原理逻辑详解

    目录 前言 一.怎么实现变量变化 二.怎么实现变量变化 三.将多个dep存储在Map中 四.将多个object的depsMap继续存储起来 五.核心 六.源码解析(TypeScript) 前言 本篇文章主要讲解vue响应式原理的逻辑,也就是vue怎么从最开始一步步推导出响应式的结构框架. 先从头构建一个简单函数推导出Vue3的Reactive原理,最后再进行源码的验证. 一.怎么实现变量变化 怎么实现变量变化,相关依赖的结果也跟着变化 当原本price=5变为price=20后total应该变为

  • vue3 reactive响应式依赖收集派发更新原理解析

    目录 proxy 依赖收集 currentEffect 派发更新 总结 proxy vue3的响应式实现依旧是依赖收集与派发更新,本节乃至后面涉及的代码都是经过简化,文章目的是讲解原理,直接贴源码会很枯燥 vue3已经从Object.property更换成Proxy,Proxy相比于前者可以直接监听对象数组,对于深层次的对象和数组,会把触发对应getter,然后去递归进行依赖收集,并不是直接像vue2暴力那样递归,总体而言性能更好 对reactive传进来的对象进行Proxy进行劫持在内部进行依

  • SpringBoot中的响应式web应用详解

    SpringBoot中的响应式web应用详解

    简介 在Spring 5中,Spring MVC引入了webFlux的概念,webFlux的底层是基于reactor-netty来的,而reactor-netty又使用了Reactor库. 本文将会介绍在Spring Boot中reactive在WebFlux中的使用. Reactive in Spring 前面我们讲到了,webFlux的基础是Reactor. 于是Spring Boot其实拥有了两套不同的web框架,第一套框架是基于传统的Servlet API和Spring MVC,第二套是

  • 浅析一下Vue3的响应式原理

    浅析一下Vue3的响应式原理

    目录 Proxy Reflect 举个例子 reactive effect track trigger Proxy Vue3 的响应式原理依赖了 Proxy 这个核心 API,通过 Proxy 可以劫持对象的某些操作. const obj = { a: 1 }; const p = new Proxy(obj, {   get(target, property, receiver) {     console.log("get");     return Reflect.get(tar

  • Vue3 reactive响应式赋值页面不渲染的解决

    目录 Vue3 reactive响应式赋值页面不渲染 问题描述 1.因数据结构而导致的未渲染解决方法 2.因页面节点未加载导致页面未渲染解决方法 3.因未指到具体点未渲染解决方法 Vue3 响应式原理-reactive Reactivity模块基本使用 编写reactive函数 Vue3 reactive响应式赋值页面不渲染 问题描述 //声明变量 let data = reactive([]) http().then(res=>{   data = res.data   console.log

  • 基于rem的移动端响应式适配方案(详解)

    基于rem的移动端响应式适配方案(详解)

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识,本质上离不开以下代码 <meta name="viewport" content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

  • 详解Vue3的响应式原理解析

    目录 Vue2响应式原理回顾 Vue3响应式原理剖析 嵌套对象响应式 避免重复代理 总结 Vue2响应式原理回顾 // 1.对象响应化:遍历每个key,定义getter.setter // 2.数组响应化:覆盖数组原型方法,额外增加通知逻辑 const originalProto = Array.prototype const arrayProto = Object.create(originalProto) ;['push', 'pop', 'shift', 'unshift', 'splic

  • Vue3中的ref和reactive响应式原理解析

    目录 1 ref 2 isref判断是不是一个ref对象 3 shallowref创建一个跟踪自身.value变化的 ref,但不会使其值也变成响应式的 4 triggerRef 5 customRef 6 reactive用来绑定复杂的数据类型 7 readonly 8 shallowReactive 9toRef 10toRefs 11toRaw Vue3系列4--ref和reactive响应式 本节主要介绍了响应式变量和对象,以及变量和对象在响应式和非响应式之间的转换. 1 ref 接受一

  • bootstrap响应式表格实例详解

    bootstrap响应式表格实例详解

    Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机,现在就bootstrap的响应式举一个例子: 如上图所示,要实现该表格在手机等移动端上只显示代号.名称.和价格,其他以查看详情的方式显示(也就是下图:) 首先,先实现在移动端能由左图到右图的转换: 代码如下: <meta charset="UTF-8"> <title></title> <!--引入bootstrap的css文件--> <link type=&

  • bootstrap响应式工具使用详解

    本文实例为大家分享了bootstrap响应式工具的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应式工具</title> <link rel="stylesheet" type="text/css" href="

随机推荐