Vue.js 中 ref 和 reactive 的区别及用法

Vue.js 中 refreactive 的区别及用法

ref
  • 目的:创建一个对值的响应式引用。

  • 用法:通过 .value 属性来访问和修改值。

  • 示例

import { ref } from 'vue';const count = ref(0);count.value++;  // 增加值
console.log(count.value);  // 访问值
  • 直接赋值数组ref 创建的是一个包含 .value 属性的对象,这个 .value 属性持有实际的数据。无论如何改变这个 .value 的内容,Vue 都能检测到变化并进行更新。

import { ref } from 'vue';const city1List = ref([]);onMounted(() => {getCityByPid(0).then(res => {city1List.value = res.data.data;  // 直接赋值新数组console.log(city1List.value);  // 访问数组内容});
});
reactive
  • 目的:创建一个深度响应的对象或数组。

  • 用法:直接修改响应对象或数组的属性。

  • 示例

    import { reactive } from 'vue'; const state = reactive({ count: 0 }); 
    state.count++; // 增加 
    count console.log(state.count); // 访问 count

  • 不能直接赋值数组reactive 创建的是一个深度响应的对象或数组,Vue 只跟踪创建时的对象引用。如果直接重新赋值一个新的对象或数组,Vue 将无法跟踪新的引用,因为新的引用不会被自动转换为响应式对象。

    import { reactive } from 'vue';
    let city1List = reactive([]); 
    onMounted(() => { 
    getCityByPid(0).then(res => { city1List.splice(0, city1List.length, ...res.data.data); // 使用数组方法修改内容 console.log(city1List); // 访问数组内容 }); 
    );

关键区别和最佳实践

  1. ref

    • 创建一个响应式引用。
    • 使用 .value 来访问和修改值。
    • 可以直接通过 .value 重新赋值新的数组或对象。
  2. reactive

    • 创建一个深度响应的对象或数组。
    • 直接修改对象或数组的属性或元素。
    • 不能直接重新赋值整个对象或数组,而需要修改其内部的属性或元素。

实际解决方案

使用 reactive 更新数组时,可以使用 splice 清除并替换元素,这样保持了对原始响应数组的引用,Vue 会继续跟踪其内容的变化。

import { reactive } from 'vue';let city1List = reactive([]);onMounted(() => {getCityByPid(0).then(res => {city1List.splice(0, city1List.length, ...res.data.data);  // 清除现有数组并添加新项目console.log(city1List);  // 访问数组内容});
});

总结

  • ref 适用于需要频繁更改整个值的场景,因为它可以直接赋值新的数组或对象。
  • reactive 适用于需要深度响应的对象或数组,在修改其内部属性或元素时能保持响应性。

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

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

相关文章

STM32 ADC精度提升方法

STM32 ADC精度提升方法 Fang XS.1452512966qq.com如果有错误,希望被指出,学习技术的路难免会磕磕绊绊量的积累引起质的变化 硬件方法 优化布局布线,尽量减小其他干扰增加电源、Vref去耦电容使用低通滤波器,或加磁珠使用DCDC时尽…

RS232隔离器的使用

RS232隔离器在通信系统中扮演着至关重要的角色,其主要作用可以归纳如下: 一、保护通信设备 电气隔离:RS232隔离器通过光电隔离技术,将RS-232接口两端的设备电气完全隔离,从而避免了地线回路电压、浪涌、感应雷击、静电…

el-upload组件封装方案

basic-upload.vue——基本上传组件 <template><div class"basic-upload-wrap"><el-uploadref"uploadRef":file-list"fileList":accept"accept"update:file-list"(data) > emits(update:file-list, data)"…

vue+js实现鼠标右键页面时在鼠标位置出现弹窗

首先是弹窗元素 <div class"tanchuang move-win1"id"tanchuang1"><el-button>111</el-button></div>然后在需要弹窗的地方监听点击事件&#xff0c;可以将这个方法写在页面载入事件中 // 获取弹窗元素 var tanchuang document.…

lua中判断2个表是否相等

当我们获取 table 长度的时候无论是使用 # 还是 table.getn 其都会在索引中断的地方停止计数&#xff0c;而导致无法正确取得 table 的长度&#xff0c;而且还会出现奇怪的现象。例如&#xff1a;t里面有3个元素&#xff0c;但是因为最后一个下表是5和4&#xff0c;却表现出不一…

一篇文章搞懂时间复杂度和空间复杂度

不知道小伙伴们有没有刷过力扣上的算法题&#xff0c;我在上研究生的时候&#xff0c;刷过了前40道题&#xff0c;上面的算法题&#xff0c;我觉得还挺难的&#xff0c;当你写完代码的时候&#xff0c;就可以提交自己写的代码到系统上&#xff0c;系统会给你写的代码计算时间复…

页面速度是如何影响SEO的?

搜索引擎使用复杂的算法来衡量您网站的重要方面&#xff0c;以决定是否向您发送流量。 搜索引擎使用您网站的小元素来确定您网站的质量和真实性&#xff0c;然后此操作将转化为您的网页在搜索引擎结果页面 中出现的位置。提高您在 SERP 中的排名的过程称为搜索引擎优化 (SEO)。…

【c】如何利用C语言控制可用性(用户是否可以修改值)

引入: 大家有没有想过设计一个函数控制功能的使用权限或变量修改权限? 我们首先来看代码: #include<stdio.h> bool usability==false;//初始值设为false是为了检查第一次设置有没有设置成功void setUsability(bool choice){usability=choice; } void printUsabilit…

JavaScript学习笔记(六)

37、JavaScript 错误 - Throw 和 Try to Catch try 语句使您能够测试代码块中的错误。 catch 语句允许您处理错误。 throw 语句允许您创建自定义错误。 finally 使您能够执行代码&#xff0c;在 try 和 catch 之后&#xff0c;无论结果如何。 37.1 JavaScript try 和 catc…

第57期|GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…

Datawhale - 角色要素提取竞赛

文章目录 赛题要求一、赛事背景二、赛事任务三、评审规则1.平台说明2.数据说明3.评估指标4.评测及排行 四、作品提交要求五、 运行BaselineStep1&#xff1a;下载相关库Step2&#xff1a;配置导入Step3&#xff1a;模型测试Step4&#xff1a;数据读取Step5&#xff1a;Prompt设…

Yi-1.5 9B Chat 上线Amazon SageMaker JumpStart

你是否对简单的API调用大模型感到不满足&#xff1f;是否因为无法亲自部署属于自己的大模型而烦恼&#xff1f; 好消息来了&#xff0c;Amazon SageMaker JumpStart 初体验 CloudLab实验上线啦&#xff01; 本实验将以零一万物最新发布的中文基础模型 Yi-1.5 9B Chat 为例&am…

kettle从入门到精通 第七十四课 ETL之kettle kettle调用https接口教程,忽略SSL校验

场景&#xff1a;kettle调用https接口&#xff0c;跳过校验SSL。&#xff08;有些公司内部系统之间的https的接口是没有SSL校验这一说&#xff0c;无需使用用证书的&#xff09; 解决方案&#xff1a;自定义插件或者自定义jar包通过javascript调用https接口。 1、http post 步…

ArcGIS Pro SDK (七)编辑 9 使用草图

ArcGIS Pro SDK &#xff08;七&#xff09;编辑 9 使用草图 文章目录 ArcGIS Pro SDK &#xff08;七&#xff09;编辑 9 使用草图1 切换草图选择模式2 聆听草图修改事件3 收听草图完成前事件并修改草图4 收听草图完成事件5 触发草图事件的自定义构造工具6 自定义自定义草图工…

Pytorch添加自定义算子之(10)-mmdeploy编译流程

整体参考 一、mmcv的编译安装 见上一篇 opencv的安装 $env:OpenCV_DIR = "D:\git_clone\opencv\build" # 我这里下载解压之后的地址 $env:path = "$env:OpenCV_DIR\x64\vc15\bin;" + $env:path $env:path = "D:\git_clone\opencv\build\OpenCVConf…

后仿真中《SDF反标必懂连载篇》之 多个SDF 文件反标疑问

设计经过综合之后会生成门级网表,在门级网表里面包含了时序信息,这时的验证称之为后仿,除了验证功能是否满足,还要验证时序是否有违例的情况。 门级网表又分为,pr前和pr后,后端做完布局布线之后的,修改好timing的网表称为带时序的pr网表,pr网表进行仿真时,后端布局布…

嵌入式UI开发-lvgl+wsl2+vscode系列:8、控件(Widgets)(一)

一、前言 这里将介绍一系列控件&#xff0c;了解后就可以开始基础的开发了。 二、示例 1、Base Obj&#xff08;基础对象&#xff09; 1.1、示例1 #include "../../lv_examples.h" #if LV_BUILD_EXAMPLESvoid lv_example_obj_1(void) {lv_obj_t * obj1;obj1 lv…

Python容器 之 列表--列表的常用操作方法

1.查询相关方法&#xff1a;index()、count() &#xff08;1&#xff09;index() 说明&#xff1a; 和 字符串中的 find() 的作用是一样 列表中是没有 find() 方法的, 只有 index() 方法&#xff1b;字符串中 同时存在 find() 和 index() 方法 格式&#xff1a;列表.index(要查…

Linux时间子系统8:clock_event_device

1、前言 上一篇我们谈到了timer&#xff0c;在详细分析hrtimer的实现之前&#xff0c;我们先追根溯源来谈一下clockevent。先抛开clockevent这个概念&#xff0c;如果硬件要支持定时功能&#xff0c;那么硬件必然要能够支持产生定时时间&#xff0c;通过异步中断的方式通知CPU&…

计算机科学中的接口(Interface)介绍

计算机科学中的接口&#xff08;Interface&#xff09;介绍 计算机科学中&#xff0c;接口是一个广泛的概念&#xff0c;在不同上下文中有不同含义&#xff1a; 1.任何两电路或设备间的连接电路&#xff0c;用于连接CPU与内存、CPU与外设之间。这是一个重要的硬件层面的接口概…