Vue3中ref和reactive的对比

1. ref

定义

  • 用途: 用于创建基本数据类型或单一值的响应式引用。
  • 语法: const myRef = ref(initialValue);

特性

  • 返回一个包含 .value 属性的 Proxy 对象。
  • 适用于基本数据类型(如数字、字符串、布尔值等)和单一值。
import { ref } from 'vue';

const count = ref(0); // 创建一个响应式引用

// 访问和修改
console.log(count.value); // 0
count.value++; // 修改值
console.log(count.value); // 1

原理

  • 代理: ref 创建的 Proxy 对象拦截对 .value 属性的访问和修改,从而实现响应式。
  • 依赖追踪: 当访问 .value 时,Vue 会记录该值的依赖,以便在值变化时通知相关组件更新。

ref通过一个RefImpl实例持有原始数据,进而使用.value属性访问和更新。而对于一个实例而言,其属性值是可以修改的。因此可以通过.value的方式为ref重新分配数据,无需担心RefImpl实例被改变进而破坏响应式:

import { ref } from 'vue';

const myRef = ref({ count: 0 }); // 创建一个 ref 包含一个对象

// 访问初始值
console.log(myRef.value.count); // 输出: 0

// 修改原始数据的属性
myRef.value.count++; // 递增 count
console.log(myRef.value.count); // 输出: 1

// 重新分配新的对象
myRef.value = { count: 10 }; // 重新分配新对象
console.log(myRef.value.count); // 输出: 10

// 确保响应式仍然有效
myRef.value.count += 5; // 更新新对象的属性
console.log(myRef.value.count); // 输出: 15

RefImpl实例一直不变,只是改变其值 

2. reactive

定义

  • 用途: 用于创建对象或数组的响应式状态。
  • 语法: const myReactive = reactive(initialObject);

特性

  • 返回一个 Proxy 对象,监控整个对象的属性。
  • 适用于复杂数据结构(如对象、数组等)。
import { reactive } from 'vue';

const state = reactive({ count: 0 }); // 创建一个响应式对象

// 访问和修改
console.log(state.count); // 0
state.count++; // 修改值
console.log(state.count); // 1

原理

  • 代理: reactive 创建的 Proxy 对象监控对象的所有属性访问和修改。
  • 深度响应式: 可以监控嵌套对象和数组的变化,确保所有层级的属性都是响应式的。
  • 依赖追踪: 访问对象的属性时,Vue 会记录这些访问,以便在属性变化时更新相关的组件或计算属性。

reactive返回的是原始对象的代理,因此不能对其重新分配对象,只能通过属性访问修改属性值,否则会破坏掉响应式:

import { reactive, effect } from 'vue';

// 创建一个响应式对象
let objectReactive = reactive({ count: 0 });

// 创建副作用函数,监听数据变化
effect(() => {
  console.log(`数据变化了:${objectReactive.count}`);
});

// 正常修改值
objectReactive.count = 1; // 输出: 数据变化了:1
objectReactive.count = 2; // 输出: 数据变化了:2

// 重新分配整个对象(会导致响应式失效)
objectReactive = reactive({ count: 3 }); // 新的对象被创建,但原来的代理失效
objectReactive.count = 4; // 这不会触发 effect

// 输出结束信息
console.log("结束了");
// 输出如下:
// 数据变化了:0
// 数据变化了:1
// 数据变化了:2
// 结束了

总结对比:

watch监听:

在 Vue 3 中,watch 可以直接监听自身组件中的 ref 对象,而不需要使用 getter 函数的原因是因为 ref 本身是响应式的,Vue 会自动处理对 ref 的变化监听。

1. ref 的工作原理:

  • Proxy 对象: 当您使用 ref 创建一个响应式引用时,Vue 返回的是一个 Proxy 对象。这个对象具有 .value 属性,用于存储实际的响应式值。

    const count = ref(0); // count 是一个包含 .value 的 Proxy 对象
    

2. 直接监听 ref:

  • 直接监听: 在自己的组件中,您可以直接使用 watch(refCount, callback) 来监听 refCount 的变化,因为 Vue 知道 refCount 是一个响应式对象。

    import { ref, watch } from 'vue';
    
    const refCount = ref(0);
    
    watch(refCount, () => {
      console.log(`refCount 数据变化了`);
    });
    
    // 修改 refCount 的值
    refCount.value++; // 这将触发 watch 的回调
    

3. 为什么可以直接监听:

  • 自动处理: Vue 的响应式系统会自动处理对 ref 的访问和修改,因此您不需要额外使用 getter 函数。watch(refCount, ...) 会在内部处理这个 ref 的代理,并在其值变化时触发回调。

  • 依赖收集: 由于您直接传递的是 ref 对象,Vue 会在执行 watch 时自动收集对这个 ref 的依赖。

4. 与 Props 的区别(父传子传递ref对象):

  • Props 解包: 当您从父组件传递一个 ref 作为 prop 到子组件时,Vue 会解包这个 ref 的值,使得子组件接收到的是原始值(例如,数字)。此时,需要使用 getter 来监听,因为 props 是只读的。

    watch(() => props.aa, (newValue, oldValue) => {
      console.log(`AA changed from: ${oldValue} to: ${newValue}`);
    });
    

总结

  • 直接监听 ref: 在组件内部,您可以直接监听 ref 对象,因为 Vue 的响应式系统会自动处理对这个对象的代理。
  • Props 处理: 对于从父组件传递的 ref,由于它会被解包成原始值,您需要使用 getter 函数来确保正确监听变化。

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

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

相关文章

C++学习笔记1——引用

引用变量是C新增的一种复合类型。 引用是已定义的变量的别名。如变量a为变量b的应用,则可以交替使用a或者b来表示该变量。引用变量主要用于函数的形参,此时函数使用的是该变量的原始数据而不是变量的副本。其作用有些类似于指针,但在类设计中…

pychar社区版下载

文章目录 第⼀步:下载社区版第二步:安装pycharm社区版第三步:创建项目 第⼀步:下载社区版 下载网址:https://www.jetbrains.com/pycharm/download/other.html 第二步:安装pycharm社区版 第三步&#xff1a…

从选题到致谢!50条经典ChatGPT学术指令1天完成1篇论文

AIPaperGPT,论文写作神器~ https://www.aipapergpt.com/ 还在为毕业论文头疼?今天给你分享50条神仙提示词,直接1天搞定整篇论文!从选题到致谢,全流程全覆盖。你可能不信,论文还能这么快写完?真…

云渲染与3D视觉效果如何影响珠宝行业!

3D渲染技术在珠宝行业的应用正迅速增长,2023年已带来数亿元收益,预计2024年将继续保持增长态势。珠宝品牌正越来越多地采用3D可视化技术来提升产品展示,以在激烈的市场竞争中占据优势。 云渲染技术不仅提升了渲染效率,还降低了成…

记一次有趣的发现-绕过堡垒机访问限制

前言 在某一次对设备运维管理的时候,发现的某安全大厂堡垒机设备存在绕过访问限制的问题,可以直接以低权限用户访问多个受控系统,此次发现是纯粹好奇心驱使下做的一个小测试压根没用任何工具。因为涉及到了很多设备和个人信息,所以…

项目实战:构建 effet.js 人脸识别交互系统的实战之路

📝个人主页🌹:Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀构建 effet.js 📒1. 什么是effet.js📜2. 为什么需要使用effet.js📝3. effet.js的功能📚4. 使用…

【国产操作系统】揭秘deepin 23自定义、全盘、高级安装的奥秘,携手探索无限可能,尝鲜之旅,等你来驾驭!

简述 deepin 作为国内最好的个人桌面Linux社区发行版之一,其实受到很多人的关系,对于很多普通用户来说,其很易用,不需要怎么折腾,界面也非常友好。 针对技术型的 Linux 用户,可能对 deepin 的态度就是仁者…

文献分享: 高维ANN算法的综述

文章目录 0. \textbf{0. } 0. 写在前面 0.1. \textbf{0.1. } 0.1. 一些预备知识 0.2. \textbf{0.2. } 0.2. 本文的主要研究 0.3. \textbf{0.3. } 0.3. 本文一些研究限制 1. \textbf{1. } 1. 三大类 ANN \textbf{ANN} ANN算法回顾以及 DPG \textbf{DPG} DPG 1.1. \textbf{1.1. …

基于递推式最小二乘法的PMSM参数辨识MATLAB仿真模型

微❤关注“电气仔推送”获得资料(专享优惠) 模型简介 最小二乘法是一种回归估计法,适用于被辨识的参数与系统输出为线性关 系的情况。它是在一定数据量下,基于系统输出误差的平方和最小的准则对参 数进行辨识的方法。此模型通过…

案例分享-优秀蓝色系UI界面赏析

蓝色UI设计界面要提升舒适度,关键在于色彩搭配与对比度。选择柔和的蓝色调作为主色,搭配浅灰或白色作为辅助色,能营造清新、宁静的氛围。同时,确保文字与背景之间有足够的对比度,避免视觉疲劳,提升阅读体验…

CatVTON:AI 虚拟换装的卓越之选

在时尚与科技融合的时代,CatVTON 作为一款创新的 AI 虚拟换装工具,正引领着时尚界的变革。它由中山大学、美图、Pixocial 和鹏城实验室等机构联合开发,以其独特的优势和卓越的性能,为时尚爱好者、电商从业者以及设计师们带来了前所…

URL路径以及Tomcat本身引入的jar包会导致的 SpringMVC项目 404问题、Tomcat调试日志的开启及总结

一、URL路径导致的 SpringMVC项目 404问题 SpringMVC项目的各项代码都没有问题,但是在页面请求时仍然显示404,编译的时候报了下面的问题: org.apache.jasper.servlet.TldScanner.scanJars 至少有一个JAR被扫描用于TLD但尚未包含TLD。 为此记录…

Windows下搭建VUE开发环境

Windows下搭建VUE开发环境 文章目录 Windows下搭建VUE开发环境第一步 安装nodejs下载nodejs安装nodejs配置环境变量安装测试配置npm的路径配置npm的国内代理安装必要工具测试工具安装的使用 第二步 安装vscode下载vscode安装插件Chinese (Simplified) (简体中文) Language Pack…

从0到1构建Next.Js项目SSG和SSR应用

最近在探索学习前端工程化相关内容,在如今前后端分离的架构下,为了提升首屏渲染速度和 SEO 效果,兜兜转转,又回到了服务端渲染。 本文主要是讲讲如何使用 Next.js 框架实现服务端渲染,重构或优化现有前端应用的 SEO 和…

光伏工程造价单自动生成

光伏工程造价单依据光伏设计图自动生成。 一、组件 类型:光伏组件是光伏电站的核心设备,负责将太阳能转化为电能。常见的类型包括单晶硅组件、多晶硅组件、薄膜组件等。 规格型号:具体规格型号取决于电站的设计需求,例如功率、…

企业博客SEO优化:8个必备工具与资源指南

在当今数字化时代,企业博客已远远超越了传统意义上的信息展示平台。它不仅是企业展示品牌形象、传递品牌价值的重要窗口,更是吸引潜在客户、增强用户粘性、提升网站流量和搜索引擎排名的关键。通过精心策划和高质量的内容创作,企业博客能够建…

【OpenGL】创建窗口/绘制图形

需要云服务器等云产品来学习Linux可以移步/-->腾讯云<--/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;新用户首次下单享超低折扣。 目录 一、创建窗口 1、代码流程图 2、运行结果 3、代码 二、三角形 1、顶点缓冲对象&#xff1a;Vertex Buffer Object…

【Qt】控件——Qt控件的介绍、QWidget的介绍、QWidget的属性、QWidget的函数

文章目录 Qt1. 控件的概念2. QWidgetenabledgeometrywindowTitlewindowIconwindowOpacitycursorfonttoolTiptoolTipDuringstyleSheet Qt 1. 控件的概念 Widget 是 Qt 中的核心概念。英文原义是 “小部件”&#xff0c;我们此处也把它翻译为 “控件”。控件是构成一个图形化界面…

吴恩达深度学习笔记(7)

误差分析&#xff1a; 你运行一个算法代替人类计算&#xff0c;但是没有达到人类的效果&#xff0c;需要手动检查算法中的错误&#xff0c;对模型的一些部分做相应调整&#xff0c;才能更好地提升分类的精度。如果不加分析去做&#xff0c;可能几个月的努力对于提升精度并没有…

Linux文件你不知道的那些事,搞清楚磁盘空间占用的问题

在进行采集日志时&#xff0c;日志文件明明被滚动压缩并转移走了&#xff0c;但是发现磁盘空间还是在不断增长&#xff0c;统一目录下的总文件大小&#xff0c;发现与实际占用也不符&#xff0c;于是想到可能是文件句柄未释放导致的&#xff0c;本文就来记录一下文件及文件句柄…