Vue3之响应式系统详解

Vue3中的响应式系统是其核心功能之一，它使得数据变化能够自动触发视图更新，从而简化了开发过程，提高了开发效率。本文将详细阐述Vue3中的响应式系统，包括其核心概念、工作原理、实现方式、应用场景以及优势。同时，本文将提供对应的代码示例，以帮助读者更好地理解Vue3的响应式系统。

一、核心概念

Vue3的响应式系统基于Proxy对象和Reflect API实现，通过拦截对象属性的读写操作，来追踪数据的变化，并自动触发依赖的更新。以下是Vue3响应式系统的核心概念：

1. Proxy对象

Proxy是ES6引入的一种功能，它允许开发者创建一个对象的代理，通过拦截并重新定义基本操作（如属性访问、赋值、枚举等），来实现对对象的自定义行为。Vue3利用Proxy对象来拦截对象属性的读写操作，从而实现了响应式的数据绑定。

2. Reflect API

Reflect API是ES6引入的一种用于操作对象的API，它提供了一系列与Object对象相同的方法，但行为更加统一和一致。Vue3在拦截对象属性的读写操作时，使用了Reflect API来实现对原始操作的调用，从而保证了代码的简洁和一致性。

3. 响应式数据

响应式数据是指能够被Vue3的响应式系统追踪和响应的数据。在Vue3中，响应式数据通常是通过reactive函数或ref函数创建的。响应式数据发生变化时，依赖于这些数据的视图和计算属性会自动更新。

4. 依赖收集与触发更新

Vue3的响应式系统通过依赖收集来追踪哪些视图或计算属性依赖于某个响应式数据。当响应式数据发生变化时，响应式系统会触发依赖于这些数据的视图和计算属性的更新。

二、工作原理

Vue3的响应式系统通过拦截对象属性的读写操作，来追踪数据的变化，并自动触发依赖的更新。以下是Vue3响应式系统的工作原理：

1. 创建响应式对象

在Vue3中，响应式对象通常是通过reactive函数或ref函数创建的。这些函数会返回一个代理对象，该代理对象会拦截对象属性的读写操作。

import { reactive, ref } from 'vue';const state = reactive({count: 0
});const count = ref(0);

2. 拦截对象属性的读写操作

当响应式对象的属性被访问或修改时，代理对象会拦截这些操作，并调用相应的处理函数。这些处理函数会利用Reflect API来执行原始操作，并同时触发依赖的收集或更新。

const handler = {get(target, key, receiver) {// 依赖收集// ...return Reflect.get(target, key, receiver);},set(target, key, value, receiver) {// 触发更新// ...return Reflect.set(target, key, value, receiver);}
};const proxyState = new Proxy(state, handler);

3. 依赖收集

当响应式对象的属性被访问时，响应式系统会进行依赖收集。它会在当前的作用域中查找是否有依赖该属性的副作用函数（如计算属性、渲染函数等），并将这些副作用函数存储在依赖集合中。

let activeEffect = null;function effect(fn) {activeEffect = fn;fn();activeEffect = null;
}effect(() => {console.log(proxyState.count); // 依赖收集
});

4. 触发更新

当响应式对象的属性被修改时，响应式系统会触发依赖于该属性的副作用函数的执行。这些副作用函数会重新计算或重新渲染依赖于该属性的视图和计算属性。

proxyState.count++; // 触发更新

三、实现方式

Vue3的响应式系统主要通过Proxy对象和Reflect API实现，同时结合了一些辅助函数和数据结构来追踪依赖和触发更新。以下是Vue3响应式系统的实现方式：

1. Proxy对象与Reflect API

Vue3使用Proxy对象来拦截对象属性的读写操作，并通过Reflect API来执行原始操作。这样可以在不修改原始对象属性的情况下，实现对数据变化的追踪和响应。

const handler = {get(target, key, receiver) {// 依赖收集track(target, key);return Reflect.get(target, key, receiver);},set(target, key, value, receiver) {// 触发更新trigger(target, key, value);return Reflect.set(target, key, value, receiver);}
};const proxyState = new Proxy(state, handler);

2. 依赖收集与触发更新的辅助函数

Vue3提供了一些辅助函数来帮助实现依赖收集和触发更新。例如，track函数用于依赖收集，它会将当前的作用域和属性名存储在一个全局的依赖映射表中；trigger函数用于触发更新，它会从依赖映射表中获取依赖于该属性的副作用函数，并执行它们。

const targetMap = new WeakMap();function track(target, key) {if (activeEffect) {let depsMap = targetMap.get(target);if (!depsMap) {targetMap.set(target, (depsMap = new Map()));}let deps = depsMap.get(key);if (!deps) {depsMap.set(key, (deps = new Set()));}deps.add(activeEffect);}
}function trigger(target, key, value) {const depsMap = targetMap.get(target);if (depsMap) {const deps = depsMap.get(key);if (deps) {deps.forEach(effect => {effect();});}}
}

3. 响应式数据的数据结构

Vue3中的响应式数据通常是通过reactive函数或ref函数创建的。这些函数会返回一个代理对象，该代理对象会拦截对象属性的读写操作。同时，Vue3还会使用一些数据结构来追踪依赖和存储响应式数据的信息。

  • reactive函数返回的代理对象会拦截对象属性的读写操作，并通过targetMap来追踪依赖。
  • ref函数返回的响应式引用会包含一个value属性来存储实际的值，并通过内部的_object属性来追踪依赖。

四、应用场景

Vue3的响应式系统在实际项目中有着广泛的应用场景，它使得数据变化能够自动触发视图更新，从而简化了开发过程，提高了开发效率。以下是一些常见的应用场景：

1. 数据绑定与自动更新

Vue3的响应式系统使得数据变化能够自动触发视图更新，从而实现了数据绑定与自动更新。开发者只需将数据定义为响应式的，并将其绑定到视图上即可，无需手动操作DOM。

<template><div>{{ state.count }}</div><button @click="increment">Increment</button>
</template><script>
import { reactive } from 'vue';export default {setup() {const state = reactive({count: 0});function increment() {state.count++;}return {state,increment};}
};
</script>

2. 计算属性

Vue3中的计算属性是基于响应式数据动态计算的值。当计算属性所依赖的响应式数据发生变化时，计算属性会自动重新计算。

<template><div>{{ doubleCount }}</div><button @click="increment">Increment</button>
</template><script>
import { reactive, computed } from 'vue';export default {setup() {const state = reactive({count: 0});const doubleCount = computed(() => state.count * 2);function increment() {state.count++;}return {doubleCount,increment};}
};
</script>

3. 侦听器

Vue3中的侦听器可以用于监听响应式数据的变化，并在变化时执行相应的逻辑处理。例如，可以使用侦听器来执行异步操作或手动控制数据更新。

<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref, watch } from 'vue';export default {setup() {// 定义一个响应式数据const count = ref(0);// 定义一个方法用于增加count的值function increment() {count.value++;}// 使用侦听器监听count的变化watch(count, (newCount, oldCount) => {// 当count的值发生变化时，执行此回调console.log(`Count changed from ${oldCount} to ${newCount}`);// 这里可以执行任何你想要的逻辑，比如异步操作// 例如，假设我们有一个异步函数fetchData，它依赖于count的值// fetchData(newCount).then(data => {//   // 处理异步返回的数据// });});// 返回需要在模板中使用的数据和方法return {count,increment};}
};
</script>

在这个示例中，我们定义了一个响应式数据count，以及一个用于增加count值的方法increment。然后，我们使用watch函数来监听count的变化。当count的值发生变化时，watch函数的回调会被调用，并传入新的值newCount和旧的值oldCount。

侦听器在Vue3中非常有用，特别是当你需要在数据变化时执行一些副作用逻辑（如异步请求、手动DOM操作等）时。通过使用侦听器，你可以确保这些逻辑只在数据实际发生变化时才执行，从而提高了代码的效率和可维护性。

此外，watch函数还提供了更多的选项，如immediate和deep，允许你更精细地控制侦听器的行为。例如，immediate: true可以在侦听器创建时立即执行回调，而deep: true则可以用于监听对象内部属性的变化。这些选项使得Vue3的侦听器功能更加灵活和强大。

五、总结

Vue3的响应式系统是其核心，利用Proxy和Reflect API追踪数据变化，自动触发视图更新，简化开发。它包含Proxy对象拦截操作、Reflect API执行原始操作、响应式数据创建、依赖收集与触发更新等核心概念。工作原理是通过拦截属性读写，实现依赖收集，并在数据变化时触发更新。实现上，结合辅助函数和数据结构追踪依赖。应用场景广泛，如数据绑定、计算属性、侦听器等，提高了开发效率。侦听器可监听数据变化，执行逻辑处理，支持异步操作和精细控制，使代码更高效、可维护。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

RabbitMQ中的Publish-Subscribe模式

RabbitMQ中的Publish-Subscribe模式

在现代分布式系统中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信和解耦系统的关键组件。RabbitMQ 是一个功能强大且广泛使用的开源消息代理&#xff0c;支持多种消息传递模式。其中&#xff0c;Publish/Subscribe&#xff08;发布/订阅&#xff0…
阅读更多...
【iOS】OC高级编程 iOS多线程与内存管理阅读笔记——自动引用计数（四）

【iOS】OC高级编程 iOS多线程与内存管理阅读笔记——自动引用计数（四）

目录 ARC规则 规则 对象型变量不能作为C语言结构体的成员 显式转换id和void* 属性 数组 ARC规则 规则 在ARC有效的情况下编译源代码必须遵守一定的规则&#xff1a; 主要解释一下最后两条 对象型变量不能作为C语言结构体的成员 要把对象型变量加入到结构体成员中时&a…
阅读更多...
C++小白实习日记——Pollnet，Efvi，UDP，数据类型转换（上）

C++小白实习日记——Pollnet，Efvi，UDP，数据类型转换（上）

上周主要是熟悉了一下公司内部一些自定义结构体对应的数据类型&#xff0c;要求&#xff1a;读取文件&#xff0c;将文件中数据转化为定义的结构体中的数据类型&#xff0c;按照时间进行排序&#xff0c;用UDP发送数据&#xff1b;在另一台服务器上接收数据&#xff0c;按照定义…
阅读更多...
路由引入问题（双点双向路由回馈问题）

路由引入问题（双点双向路由回馈问题）

简介 总所周知&#xff0c;路由引入import又称路由重分发redistribute&#xff0c;为了解决不同路由协议进程间路由信息不互通而使用的技术&#xff0c;由于不同路由协议的算法、机制、开销等因素的差异&#xff0c;它们之间无法直接交换路由信息。因此&#xff0c;路由引入技…
阅读更多...
26. Three.js案例-自定义多面体

26. Three.js案例-自定义多面体

26. Three.js案例-自定义多面体 实现效果 知识点 WebGLRenderer WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它支持 WebGL 渲染&#xff0c;并提供了多种配置选项。 构造器 new THREE.WebGLRenderer(parameters) 参数类型描述parametersObject可选参数对象&…
阅读更多...
【在Linux世界中追寻伟大的One Piece】HTTP Session

【在Linux世界中追寻伟大的One Piece】HTTP Session

目录 1 -> 引入HTTP Session 1.1 -> 定义 1.2 -> 工作原理 1.3 -> 安全性 1.4 -> 超时和失效 1.5 -> 用途 2 -> 模拟session行为 3 -> 实验测试session 1 -> 引入HTTP Session 1.1 -> 定义 HTTP Session是服务器用来跟踪用户与服务器交…
阅读更多...
Docker-Dockerfile、registry

Docker-Dockerfile、registry

Dockerfile 一、概述 1、commit的局限 很容易制作简单的镜像&#xff0c;但碰到复杂的情况就十分不方便&#xff0c;例如碰到下面的情况&#xff1a; 需要设置默认的启动命令需要设置环境变量需要指定镜像开放某些特定的端口 2、Dockerfile是什么 Dockerfile是一种更强大的镜…
阅读更多...
蓝桥杯刷题——day1

蓝桥杯刷题——day1

蓝桥杯刷题——day1 题目一题干题目解析代码 题目二题干题目解析代码 题目一 题干 给定一个字符串 s &#xff0c;验证 s 是否是 回文串 &#xff0c;只考虑字母和数字字符&#xff0c;可以忽略字母的大小写。本题中&#xff0c;将空字符串定义为有效的 回文串 。 题目链接&a…
阅读更多...
【多模态文档智能】OCR-free感知多模态大模型技术链路及训练数据细节

【多模态文档智能】OCR-free感知多模态大模型技术链路及训练数据细节

目前的一些多模态大模型的工作倾向于使用MLLM进行推理任务&#xff0c;然而&#xff0c;纯OCR任务偏向于模型的感知能力&#xff0c;对于文档场景&#xff0c;由于文字密度较高&#xff0c;现有方法往往通过增加图像token的数量来提升性能。这种策略在增加新的语言时&#xff0…
阅读更多...
如何在 Ubuntu 22.04 上使用 Fail2Ban 保护 SSH

如何在 Ubuntu 22.04 上使用 Fail2Ban 保护 SSH

前言 SSH&#xff0c;这玩意儿&#xff0c;简直是连接云服务器的标配。它不仅好用&#xff0c;还很灵活。新的加密技术出来&#xff0c;它也能跟着升级&#xff0c;保证核心协议的安全。但是&#xff0c;再牛的协议和软件&#xff0c;也都有可能被攻破。SSH 在网上用得这么广&…
阅读更多...
供应链系统设计-中台系统设计系列（三）- 好中台的标准之稳定原则

供应链系统设计-中台系统设计系列（三）- 好中台的标准之稳定原则

概述 在上一篇供应链系统设计-中台系统设计系列&#xff08;二&#xff09;- 好中台的标准之复用原则中&#xff0c;我们以复用原则为主&#xff0c;讨论了以下3点&#xff1a; 前台业务效率提升&#xff1a;好的中台能够显著提高前台业务的效率&#xff0c;通过将前台业务中通…
阅读更多...
CTF 攻防世界 Web: FlatScience write-up

CTF 攻防世界 Web: FlatScience write-up

题目名称-FlatScience 网址 index 目录中没有发现提示信息&#xff0c;链接会跳转到论文。 目前没有发现有用信息&#xff0c;尝试目录扫描。 目录扫描 注意到存在 robots.txt 和 login.php。 访问 robots.txt 这里表明还存在 admin.php admin.php 分析 在这里尝试一些 sql…
阅读更多...
axios请求拦截器和响应拦截器，封装naive-ui的 Loading Bar加载条和useMessage消息提示

axios请求拦截器和响应拦截器，封装naive-ui的 Loading Bar加载条和useMessage消息提示

接之前的博客设计从0开始边做边学&#xff0c;用vue和python做一个博客&#xff0c;非规范化项目&#xff0c;怎么简单怎么弄&#xff0c;跑的起来有啥毛病解决啥毛病&#xff08;三&#xff09;&#xff0c;目前已经完成了基本的功能demo&#xff0c;但是请求接口不可能每个页…
阅读更多...
Blue Ocean 在Jenkins上创建Pipeline使用详解

Blue Ocean 在Jenkins上创建Pipeline使用详解

BlueOcean是Jenkins的一个插件，它提供了一套可视化操作界面来帮助用户创建、编辑Pipeline任务。以下是对BlueOcean中Pipeline操作的详细解释： 一、安装与启动BlueOcean 安装：在Jenkins的“系统管理”->“插件管理”->“可选插件”中搜索“BlueOcean”，然后点击“Ins…
阅读更多...
opencv——识别图片颜色并绘制轮廓

opencv——识别图片颜色并绘制轮廓

图像边缘检测 本实验要用到Canny算法&#xff0c;Canny边缘检测方法常被誉为边缘检测的最优方法。 首先&#xff0c;Canny算法的输入端应为图像的二值化结果&#xff0c;接收到二值化图像后&#xff0c;需要按照如下步骤进行&#xff1a; 高斯滤波。计算图像的梯度和方向。非极…
阅读更多...
Python中的异步编程：从基础到实践

Python中的异步编程：从基础到实践

在现代编程中，异步编程已经成为提高程序性能和响应能力的重要手段。Python，作为一种动态、解释型的高级编程语言，提供了多种异步编程的解决方案。本文将从Python异步编程的基础知识出发，逐步深入到实际应用中，帮助读者理解和掌握这一技术。 1. 异步编程简介 异步编程是一…
阅读更多...
基础库urllib的使用

基础库urllib的使用

学习爬虫&#xff0c;其基本的操作便是模拟浏览器向服务器发出请求&#xff0c;那么我们需要从哪个地方做起呢?请求需要我们自己构造吗?我们需要关心请求这个数据结构怎么实现吗?需要了解 HTTP、TCP、IP层的网络传输通信吗?需要知道服务器如何响应以及响应的原理吗? 可能…
阅读更多...
剑指Offer|day4 LCR 004. 只出现一次的数字 II

剑指Offer|day4 LCR 004. 只出现一次的数字 II

LCR 004. 只出现一次的数字 II 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每个元素都恰出现 **三次 。**请你找出并返回那个只出现了一次的元素。 示例 1&#xff1a; 输入&#xff1a;nums [2,2,3,2] 输出&#xff1a;3提示&#xff1a…
阅读更多...
【Linux】poll函数

【Linux】poll函数

poll和select的区别不大&#xff0c;主要是poll没有连接数限制&#xff0c;因为它用的链表实现 #include <poll.h>int poll(struct pollfd *fds, nfds_t nfds, int timeout); struct pollfd {int fd; //要监控的文件描述符,如果fd为-1, 表示内核不再监控short…
阅读更多...
Mysql学习笔记之SQL-1

Mysql学习笔记之SQL-1

上篇文章我们介绍了Mysql的安装&#xff0c;这篇文章我们介绍Mysql的操作语言SQL 1. 简介 sql全称&#xff08;Structured Query Language&#xff09;是结构化查询语言&#xff0c;操作关系型数据库的编程语言&#xff0c;定义了一套操作关系型数据库统一标准 2. sql分类 …
阅读更多...
最新文章

Copyright @ 2022~2023