vue3 源码解析（1）— reactive 响应式实现

前言

本文是 vue3 源码解析系列的第一篇文章，项目代码的整体实现是参考了 v3.2.10 版本，项目整体架构可以参考之前我写过的文章 rollup 实现多模块打包。话不多说，让我们通过一个简单例子开始这个系列的文章。

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reactive</title>
</head>
<body>
<div id="app"></div>
<!--响应式模块的代码-->
<script src="../packages/reactivity/dist/reactivity.global.js"></script>
<script>
  let { reactive, effect } = VueReactivity;
  const user = {
    name: 'Alice',
    age: 25,
    address: {
      city: 'New York',
      state: 'NY'
    }
  };
  let state = reactive(user)

  effect(() => {
    app.innerHTML = state.address.city
  });
  setTimeout(() => {
    state.address.city = 'California'
  }, 1000);
</script>
</body>
</html>

在这里插入图片描述

通过例子可以看到1s之后改变数据视图也跟随变，在 vue3 中是那如何实现这一效果的呢？我们先从例子中的 reactive 函数出发。

实现响应式

有了解过 vue3 源码的知道实现响应式的核心是 proxy ，这里关于 proxy 的方法暂时不做过多的介绍也不是本文的重点所在，这里先简单看下核心函数 reactive 代码实现。

reactive

reactive 函数返回一个对象的响应式代理。并且响应式的转换是“深度”的，它影响所有嵌套属性。一个响应式对象还会深度展开任何是 ref 的属性，同时保持响应式。

import { reactiveHandlers } from './baseHandlers'

const reactiveMap = new WeakMap()

function reactive (target) {
  return createReactiveObject(target, reactiveHandlers, reactiveMap)
}

function createReactiveObject (target, baseHandlers, proxyMap) {
  if (!isObject(target)) {
    return target
  }
  // target already has corresponding Proxy
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  const proxy = new Proxy(target, baseHandlers)
  // WeakMap
  proxyMap.set(target, proxy)
  return proxy
}

需要注意的是：

  1. 如果一个对象已经被创建成响应式对象了，则直接返回该响应式对象，避免重复代理同一个目标对象。

  2. 使用 WeakMap 可以避免内存泄漏问题，因为当目标对象 target 不再被引用时，其对应的代理对象 existingProxy 也会被自动垃圾回收。

reactiveHandlers

reactiveHandlers 是实现响应式数据的关键对象，它通过拦截对象的操作来实现对数据的监听和更新。

const reactiveHandlers = {
  get,
  set
}

reactiveHandlers 中包含了一些处理数据的方法，比如 get 和 set。

get

当我们访问某个响应式对象的属性时，get 方法会被触发，它会对该属性进行依赖收集，将响应式对象和该属性建立联系。

import { isObject } from '@vue/shared'

const get = createGetter()

function createGetter (isReadonly = false, shallow = false) {
  return function get (target, key, receiver) {
    const res = Reflect.get(target, key, receiver)
    track(target, 'get', key)  // 收集依赖
    // 懒代理
    if (isObject(res)) {
      return reactive(res) // 递归
    }
    return res
  }
}

这里会有一个懒代理具体的好处包括：

  1. 性能优化：代理只会在需要的时候触发，避免了不必要的代理和响应式数据更新，提高了组件渲染的性能。

  2. 减少不必要的内存开销：只有在需要时才会创建响应式数据对象，避免了不必要的内存开销。

  3. 更加灵活：懒代理可以更细粒度地控制哪些数据需要进行代理和哪些数据不需要进行代理，可以更加灵活地处理组件状态。

set

当我们修改某个响应式对象的属性时，set 方法会被触发，它会更新该属性的值，并通知所有依赖该属性的组件进行更新。

import { hasChanged } from '@vue/shared'

const set = createSetter()

function createSetter (shallow = false) {
  return function set (target, key, value, receiver) {
    // 注意先读取后设置
    const oldValue = Reflect.get(target, key)
    const result = Reflect.set(target, key, value, receiver)
    // 修改
    if (hasChanged(value, oldValue)) {
      // 触发更新
      trigger(target, 'set', key, value, oldValue)
    }
  	return result
  }
}

其中函数的参数 shallow 表示是否进行浅层响应式处理。这里后续会提到。

副作用函数

除了上述响应式相关的代码，还有一个更为重要的方法就是副作用函数 effect。

effect

effect 函数主要用于创建响应式数据的副作用函数，该函数接受一个函数作为参数。该函数会立即运行一次。其中任何响应式属性被更新时，函数将再次运行。

type ReactiveEffectOptions = {
  lazy?: boolean
  scheduler?: (...args: any[]) => any
}

function effect (fn, options?: ReactiveEffectOptions) {
  const _effect = createReactiveEffect(fn, options)
  if (!options || !options.lazy) {
    _effect() // 默认执行
  }
  return _effect
}

使用 effect 函数的好处是，能够简化响应式数据与副作用之间的代码关系，使得代码更加易于理解和维护。同时，effect 函数还支持配置项：

  • lazy：是否延迟执行副作用函数。
  • scheduler：指定异步任务调度器，可用于节流、防抖等。

createReactiveEffect

createReactiveEffect 函数的作用是创建一个具有响应式能力的函数。

let uid = 0
let activeEffect // 保存当前的effect
let effectStack = [] // 定义一个栈结构,解决effect嵌套的问题

function createReactiveEffect (fn, options) {
  const effect = function reactiveEffect () {
    // 保证effect唯一性
    if (!effectStack.includes(effect)) {
      try {
        effectStack.push(effect)
        activeEffect = effect
        return fn() // 执行用户定义的方法并返回值
      } finally {
        effectStack.pop()
        activeEffect = effectStack[effectStack.length - 1]
      }
    }
  }
  effect.id = uid++ // 区别effect
  effect.fn = fn // 保存用户方法
  effect.options = options // 保存用户属性
  return effect
}

在这段代码主要作用是：

  1. 定义 effect 函数，该函数代表了一个具有响应式能力的函数，并且会在响应式状态发生变化时被调用。

  2. 在 effect 函数中，通过 effectStack 数组来保证 effect 函数的唯一性。每次执行effect 函数之前，都会将 effect 函数压入 effectStack 数组中，以此来判断当前是否已经存在同样的 effect 函数。如果不存在，则将当前 effect 函数设置为 activeEffect，执行用户定义的方法 fn() 并返回结果。这个过程中，使用 try...finally 语句块来确保 effectStack 数组可以被正确地维护。

  3. 最后，为 effect 函数添加一些属性，包括 id、 fn 和 options，并将 effect 函数返回。

总之，这段代码的主要目的是为 vue3 的响应式系统中的副作用函数 effect 创建一个具有响应式能力的版本，并保证了每个 effect 函数的唯一性。

依赖收集与派发更新

在创建完响应式对象之后如何在数据更新的时候重新执行 effect 函数呢？这里就需要用到依赖收集（track）与派发更新（trigger）。

track

track 函数作用是追踪响应式对象中属性的访问，并将当前的依赖关系与属性关联。

let targetMap = new WeakMap()

function track (target, type, key) {
  if (activeEffect === undefined) return
  // 获取effect
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
  }
}

在这段代码主要作用是实现了跟踪（track）依赖项（target）和副作用（activeEffect）之间的关系。

trigger

trigger 函数用于触发一个响应式对象上的更新，它的作用是让 vue3 知道该响应式对象已经进行了变化，从而重新渲染相关视图。

function trigger (target, type, key, newValue?, oldValue?) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    // never been tracked
    return
  }
  let deps = []
  // schedule runs for SET | ADD | DELETE
  if (key !== undefined) {
    deps.push(depsMap.get(key)) // [Set[activeEffect]]
  }
  // 副作用函数
  const effects = []
  for (const dep of deps) {
    if (dep) {
      effects.push(...dep)
    }
  }
  for (const effect of effects) {
    effect()
  }
}

在这段代码主要作用是：

  1. 函数会从 targetMap 中获取与目标对象关联的依赖关系图 depsMap。如果 depsMap 不存在，即目标对象从未被追踪过，那么就直接返回。

  2. 再根据操作类型和属性名，从 depsMap 中获取与之相关的依赖集合（dep）。如果 dep 存在，就将其加入 deps 数组中。最后，通过 effects 数组收集所有与 deps 集合相关的副作用函数，然后依次调用它们，完成重新渲染视图的工作。

需要注意的是，deps 集合中存储的是 effect 而不是具体的响应式对象。这是因为一个副作用函数可以同时依赖多个响应式对象，因此在触发更新时，需要先从 depsMap 中获取与目标对象相关的 deps 集合，然后再从 dep 集合中获取所有副作用函数，最后统一执行它们。

执行过程

本文所涉及的代码已基本编写完成，为了更好的理解每个函数是如何执行的，我们可以通过 debugger 来调试一下。

初始化

在第一次执行之后以下全局变量对应的值。

reactiveMap

reactiveMap 对应的数据如下图所示。
在这里插入图片描述

targetMap

在 effect 函数执行过程中 activeEffect 函数会一直存在，此时依赖收集完之后对应的 targetMap 数据如下图所示。
在这里插入图片描述
需要注意的是： effect 执行完之后会从 effectStack 数组中删除栈顶元素，并将数组的最后一个元素作为当前激活的 effect（即 activeEffect）。这通常在处理依赖项收集时使用，当一个 effect 被触发时，它会将自己推入 effectStack 中，当它完成执行后，会从 effectStack 中弹出自己，然后 activeEffect 变为新的栈顶元素。这样做可以保证在 effect 执行期间，新的 effect 触发时不会干扰当前正在执行的 effect。

数据更新时

触发 get

当访问 state.address 时又会触发 get ，同时也会触发 track ，由于此时 effect 已经执行完当前没有激活状态下的 effect ，所以此处不会再次进行依赖收集。在触发 get 时对应的数据如下图所示。

在这里插入图片描述
需要注意的是：通过 Reflect.get 返回的 res 是一个对象此时又会触发 reactive 但此时的返回值已经存在于 reactiveMap 中，所以不会重复进行响应式的处理。

触发 set

执行 address.city = 'California' 会触发 set ，此时新值和旧值不一样会触发 trigger。在触发 set 时对应的数据如下图所示。

在这里插入图片描述

触发更新

触发 trigger 时会从 targetMap 的子项 depsMap 中获取对应的 effect 函数并执行。

在这里插入图片描述

再次执行 effect

由于数据的改变 effect 函数会被再一次触发，再次访问 state.address 同样会触发 get 与第一次不同的是此时的数据已经被更新为最新的值。与此同时 activeEffect 也会被再一次赋值，此时对应的数据如下图所示。

在这里插入图片描述
由于第一次访问的时候对应的值已经被缓存，再次访问的时候就不会重复进行依赖收集和响应式的处理，而是直接返回最新的值。

总结

综上所述，vue3 的响应式原理通过使用 Proxy 对象实现数据代理，结合副作用函数和依赖追踪，实现了高效的数据变化追踪和自动更新机制。这种设计使得 vue3 在处理数据和视图之间的关系时更加灵活和高效。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/104871.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Web攻防05_MySQL_二次注入堆叠注入带外注入

Web攻防05_MySQL_二次注入堆叠注入带外注入

文章目录 MYSQL-二次注入-74CMS思路描述&#xff1a;注入条件&#xff1a;案例&#xff1a;74CMS个人中心简历功能 MYSQL-堆叠注入-CTF强网思路描述注入条件案例&#xff1a;2019强网杯-随便注&#xff08;CTF题型&#xff09; MYSQL-带外注入-DNSLOG注入条件使用平台带外应用场…
阅读更多...
Mybatis-Plus CRUD

Mybatis-Plus CRUD

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Mybatis-Plus CRUD 通用 Service CRUD 封装 IService 接口&#xff0c;进一步封装 CRUD 采用 get 查询、remove 删除 、list 查询集合、page 分页的前缀命名方式区分 …
阅读更多...
【0229】libpq库实现压测PG服务器max_connections的最大连接数

【0229】libpq库实现压测PG服务器max_connections的最大连接数

1. PG服务器接收的最大连接数 在PG服务的postgresql.conf配置文件中，参数：max_connections 注明了PG服务所能够接受的最大客户端的连接数量。此值默认是100，那么PG服务此参数最大能够调到多大呢？ 本文将采用libpq库编写demo来进行压测，并将最终的结论和数据于文章中给出。…
阅读更多...
UWB技术在定位系统中的革新应用

UWB技术在定位系统中的革新应用

超宽带技术&#xff08;Ultra-Wideband, UWB&#xff09;的崛起为定位系统领域带来了前所未有的机遇。其亚米级别的高精度定位、强大的穿透能力以及高速数据传输的特性&#xff0c;使得UWB在室内和室外定位系统中得以广泛应用。本文将深入探讨UWB技术在定位系统中的应用&#x…
阅读更多...
关于数据可视化那些事

关于数据可视化那些事

干巴巴的数据没人看&#xff0c;数据可视化才能直观展现数据要点&#xff0c;提升数据分析、数字化运营决策效率。那关于可视化的实现方式、技巧、工具等&#xff0c;你了解几分&#xff1f;接下来&#xff0c;我们就来聊聊数据可视化那些事。 1、什么是数据可视化&#xff1f…
阅读更多...
java 企业工程管理系统软件源码 自主研发 工程行业适用

java 企业工程管理系统软件源码 自主研发 工程行业适用

工程项目管理软件&#xff08;工程项目管理系统&#xff09;对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营&#xff0c;全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&am…
阅读更多...
LeetCode刷题---简单组（三）

LeetCode刷题---简单组（三）

文章目录 &#x1f352;题目一 20. 有效的括号&#x1f352;解法一&#x1f352;题目二 26. 删除有序数组中的重复项&#x1f352;解法一&#x1f352;题目三 21. 合并两个有序链表&#x1f352;解法一 &#x1f352;题目一 20. 有效的括号 给定一个只包括 ‘(’&#xff0c;‘…
阅读更多...
在antd里面渲染MarkDown并且自定义一个锚点目录TOC（重点解决导航目录不跟随文档滚动的问题）

在antd里面渲染MarkDown并且自定义一个锚点目录TOC（重点解决导航目录不跟随文档滚动的问题）

一、整体思路 由于有很多很长的文档需要渲染&#xff0c;我觉得用MarkDown的方式会比较适合管理&#xff0c;所以这两天测试了一下在antd里面集成MarkDown的渲染模块。 总体思路参考&#xff1a; https://blog.csdn.net/Sakuraaaa_/article/details/128400497 感恩大佬的倾情付…
阅读更多...
windows安装最新pip官方教程

windows安装最新pip官方教程

在执行pip的pip install --upgrade pip更新时&#xff0c;出现如下错误&#xff0c;怎么也无法重新安装&#xff1a; 根据官网的安装教程来 命令的方式一&#xff1a; • 卸载PIP的命令&#xff1a;python -m pip uninstall pip • 重装PIP的命令&#xff1a;python -m ensure…
阅读更多...
Biome-BGC生态系统模型与Python融合技术教程

Biome-BGC生态系统模型与Python融合技术教程

详情点击公众号链接&#xff1a;Biome-BGC生态系统模型与Python融合技术教程 前言 Biome-BGC是利用站点描述数据、气象数据和植被生理生态参数&#xff0c;模拟日尺度碳、水和氮通量的有效模型&#xff0c;其研究的空间尺度可以从点尺度扩展到陆地生态系统。 在Biome-BGC模型…
阅读更多...
thinkphp6项目使用多应用开发

thinkphp6项目使用多应用开发

使用composer安装项目&#xff0c;命令&#xff1a;composer create-project topthink/think thinkphp6使用多应用开发&#xff0c;安装多应用扩展&#xff0c;命令&#xff1a;composer require topthink/think-multi-app安装多应用扩展成功后&#xff0c;删除app/controller文…
阅读更多...
如何使用 Pinia ORM 管理 Vue 中的状态

如何使用 Pinia ORM 管理 Vue 中的状态

状态管理是构建任何Web应用程序的重要组成部分。虽然Vue提供了管理简单状态的技术&#xff0c;但随着应用程序复杂性的增加&#xff0c;处理状态可能变得更具挑战性。这就是为什么像Pinia这样的库被创建出来&#xff0c;以增强Vue的基本状态管理能力。然而&#xff0c;在大型应…
阅读更多...
【虚幻引擎UE】UE4/UE5 基于2D屏幕坐标获取场景3D坐标 射线检测（蓝图/C++）

【虚幻引擎UE】UE4/UE5 基于2D屏幕坐标获取场景3D坐标 射线检测（蓝图/C++）

UE4/UE5 基于2D屏幕坐标获取场景3D坐标 一、射线检测1&#xff09;定义1&#xff09;射线与3D场景中的物体交互的流程2&#xff09;射线检测蓝图函数3&#xff09;蓝图实现根据鼠标点击位置获取场景中的坐标值4&#xff09;根据相机中心点获取场景中的坐标值5&#xff09;射线检…
阅读更多...
基于SpringBoot的垃圾分类管理系统

基于SpringBoot的垃圾分类管理系统

基于SpringBootVue的垃圾分类管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven主要功能&#xff1a;包括前台和后台两部分、首页列表展示、垃圾分类、垃圾图谱、查看详…
阅读更多...
基于PHP的图像分享社交平台

基于PHP的图像分享社交平台

有需要请加文章底部Q哦 可远程调试 基于PHP的图像分享社交平台 一 介绍 此图像分享社交平台基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。平台角色分为用户和管理员。用户可注册登录&#xff0c;发布图像&#xff0c;修改个人信息&#xff0c;评论图像…
阅读更多...
lua-web-utils和proxy程序示例

lua-web-utils和proxy程序示例

以下是一个使用lua-web-utils和https://www.duoip.cn/get_proxy的爬虫程序示例。每行代码后面都给出了详细的中文解释。 -- 导入所需的库 local http require("http") local ltn12 require("ltn12") local json require("json") local web_u…
阅读更多...
Python 编写 Flink 应用程序经验记录（Flink1.17.1）

Python 编写 Flink 应用程序经验记录（Flink1.17.1）

目录 官方API文档 提交作业到集群运行 官方示例 环境 编写一个 Flink Python Table API 程序 执行一个 Flink Python Table API 程序 实例处理Kafka后入库到Mysql 下载依赖 flink-kafka jar 读取kafka数据 写入mysql数据 flink-mysql jar 官方API文档 https://nigh…
阅读更多...
软件工程17-18期末试卷

软件工程17-18期末试卷

2.敏捷开发提倡一个迭代80%以上的时间都在编程&#xff0c;几乎没有设计阶段。敏捷方法可以说是一种无计划性和纪律性的方法。错 敏捷开发是一种软件开发方法论&#xff0c;它强调快速响应变化、持续交付有价值的软件、紧密合作和适应性。虽然敏捷方法鼓励迭代开发和灵活性&…
阅读更多...
腾讯云国际-如何使用对象存储COS在 CKafka 控制台创建数据异步拉取任务？腾讯云代充

腾讯云国际-如何使用对象存储COS在 CKafka 控制台创建数据异步拉取任务？腾讯云代充

操作场景 Datahub 支持接入各种数据源产生的不同类型的数据&#xff0c;统一管理&#xff0c;再分发给下游的离线/在线处理平台&#xff0c;构建清晰的数据通道。 本文以 COS 数据为例介绍如何在 CKafka 控制台创建数据异步拉取任务&#xff0c;并对任务进行修改配置&#xf…
阅读更多...
CVE-2023-46227 Apache inlong JDBC URL反序列化漏洞

CVE-2023-46227 Apache inlong JDBC URL反序列化漏洞

项目介绍 Apache InLong&#xff08;应龙&#xff09;是一站式、全场景的海量数据集成框架&#xff0c;同时支持数据接入、数据同步和数据订阅&#xff0c;提供自动、安全、可靠和高性能的数据传输能力&#xff0c;方便业务构建基于流式的数据分析、建模和应用。 项目地址 h…
阅读更多...
最新文章

Copyright @ 2022~2023