【vue for beginner】ref和reactive

挪威特罗姆瑟夜景

🌈Don’t worry , just coding!
内耗与overthinking只会削弱你的精力,虚度你的光阴,每天迈出一小步,回头时发现已经走了很远。

📗概念

在 Vue 3 中,ref 和 reactive 是用于创建响应式数据的两种主要方法。

ref

用法
ref 用于创建一个基本数据类型的响应式引用(如字符串、数字、布尔值等)或对象的引用。
通过 .value 属性访问和修改其值。
示例

import { ref } from 'vue';

const count = ref(0);

function increment() {
    count.value++;
}

reactive

用法
reactive 用于创建一个响应式对象,适用于更复杂的数据结构,如对象和数组。
直接访问和修改对象的属性。
示例

import { reactive } from 'vue';

const state = reactive({
    count: 0,
    message: 'Hello, Vue!'
});

function increment() {
    state.count++;
}

区别

在这里插入图片描述

总结

  • 若需要一个基本类型的响应式数据,必须使用ref。
  • 若需要一个响应式对象,层级不深,ref、reactive都可以,推荐用reactive。
  • 若需要一个响应式对象,且层级较深,推荐使用reactive。
  • ref创建的变量必须使用.value(可以使用volar插件自动添加.value)
  • reactive重新分配一个新对象,会失去响应式(可以使用Object.assign去整体替换)。

💡 reactive响应式怎么理解

在 Vue 3 中,使用 reactive 创建的对象是响应式的,但如果你重新分配一个新对象给这个响应式对象的引用,它将失去响应性。

理解响应式的基本原理

响应式对象:

使用 reactive 创建一个对象时,Vue 会通过代理(Proxy)机制使这个对象的属性变得响应式。这意味着当你修改对象的属性时,Vue 会自动更新依赖于这些属性的组件。
重新分配新对象:

直接将一个新对象赋值给原来的响应式对象,例如:

const state = reactive({ count: 0 });
state = { count: 1 }; // 失去响应性

state 现在引用了一个新的对象,而原来的 state 对象仍然是响应式的,无法再通过 state 访问到它。

使用 Object.assign

为了保持响应性并更新对象的内容,可以使用 Object.assign 或扩展运算符(spread operator)来更新对象的属性,而不是重新赋值整个对象。例如:

使用 Object.assign

Object.assign(state, { count: 1 });

使用扩展运算符
能达到更新state的目的,但是会导致失去响应性

state = { ...state, count: 1 }; // 不推荐,因为这会导致失去响应性

总结

失去响应性: 重新分配一个新对象会使原有的响应式对象失去响应性。
使用 Object.assign: 通过 Object.assign 方法更新属性,可以保持对象的响应性。

💪无人扶我青云志,我自踏雪至山巅。
在这里插入图片描述

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

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

相关文章

从技术视角看AI在Facebook全球化中的作用

在全球化日益加深的今天,人工智能(AI)作为一种变革性技术,正在深刻影响全球互联网巨头的发展方向。Facebook作为全球最大的社交媒体平台之一,正通过AI技术突破语言、文化和技术的障碍,推动全球化战略的实现…

css:转换

转换 移动 /* transform: translate(100px, 200px); */transform: translateX(100px);transform: translateY(100px); /*一个意思*/ 如果后面跟百分数的意思是移动盒子自身x/y方向长度的百分比,可以用作子绝父相控制盒子水平居中垂直居中 translate里的xy值是相对…

SpringCloud2~~~

Nacos Nacos就是替代 注册中心【Eureka】 和 配置中心【Config】 支持AP和CP,可以切换 了解即可 下载和运行 下载版本(找自己想要的版本):Tags alibaba/nacos GitHub 本地有良好的 Java8 Maven环境 解压安装包,直接…

从0开始学PHP面向对象内容之常用设计模式(享元)

二、结构型设计模式 7、享元模式(Flyweight Pattern) 这里是引用享元模式(Flyweight Pattern) 是一种结构型设计模式,旨在通过共享对象来减少内存使用,尤其适用于大量相似对象的场景。通过共享和重用对象的…

AI开发 - GPT之魂 用Python 演示chatGPT的自注意力机制 - 机器学习

自注意力机制(Self-Attention)就是让模型在处理每个词时,学会“关注重点”,而不是平均地对每个词一视同仁。这种机制让 GPT 能更聪明地理解句子的上下文和语义之间的关系。 自注意力机制是 GPT 的核心,它帮助模型在理解…

循环神经网络(RNN)简述

RNN及其变体 1、概述 (一)、概念 RNN(Recurrent Neural Network), 中文称作循环神经网络, 它一般以序列数据为输入, 通过网络内部的结构设计有效捕捉序列之间的关系特征, 一般也是以序列形式进行输出。 RNN的循环机制使模型隐层**上一时间步产生的结果, 能够作为当下时间步…

计算机毕业设计Python+LSTM天气预测系统 AI大模型问答 vue.js 可视化大屏 机器学习 深度学习 Hadoop Spark

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…

Next.js-样式处理

#题引:我认为跟着官方文档学习不会走歪路 Next.js 支持多种为应用程序添加样式的方法,包括: CSS Modules:创建局部作用域的 CSS 类,避免命名冲突并提高可维护性。全局 CSS:使用简单,对于有传统…

QT:多ui界面显示

文章目录 1.多ui界面添加2.跳转函数3.返回函数4.Qt5源码工程5.模态显示 1.多ui界面添加 最终生成这个目录 2.跳转函数 void MainWindow::on_pushButton_clicked() {//this->setWindowModality(Qt::WindowModal);test1 *t1 new test1();t1->setParentData(this);this-…

利用大数据和人工智能彻底改变移动测试

移动应用程序是按需提供的公司品牌。它是了解组织提供的任何服务或产品的窗口。在 Kobiton,他们明白这一点 — 他们的使命是通过测试改进移动应用程序。Kobiton 是一个移动测试平台,允许客户在世界任何地方对真实移动设备执行手动和自动测试。它最初是一…

Ubuntu环境中RocketMQ安装教程

参考教程 https://blog.csdn.net/weixin_56219549/article/details/126143231 1、安装JDK,并配置环境变量(略) 2、下载RocketMQ安装包 RocketMQ下载地址,选择二进制包下载 unzip rocketmq-all-5.0.0-ALPHA-bin-release.zip 使…

基于JAVA的旅游网站系统设计

摘 要 自改革开放以来, 我国国内旅游业发展迅速,覆盖面广,但总的来说仍然处于一种低消费、大众化、低水平、 中近距离旅游的状况。旅游基础设备、服务设施建设发展很快,但仍然不能适应国内旅游发展速度的要求。我国的 旅游业是在…

服务器数据恢复—raid6阵列硬盘被误重组为raid5阵列的数据恢复案例

服务器存储数据恢复环境: 存储中有一组由12块硬盘组建的RAID6阵列,上层linux操作系统EXT3文件系统,该存储划分3个LUN。 服务器存储故障&分析: 存储中RAID6阵列不可用。为了抢救数据,运维人员使用原始RAID中的部分…

论文笔记-WWW2024-ClickPrompt

论文笔记-WWW2024-ClickPrompt: CTR Models are Strong Prompt Generators for Adapting Language Models to CTR Prediction ClickPrompt: CTR模型是大模型适配CTR预测任务的强大提示生成器摘要1.引言2.预备知识2.1传统CTR预测2.2基于PLM的CTR预测 3.方法3.1概述3.2模态转换3.…

循环神经网络(RNN)详解

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…

【微服务】Nacos

一、安装 1、官网地址:https://nacos.io/download/nacos-server/ 2、启动:找到bin目录下的startup.cmd双击启动,或者打开一个命令窗口输入: startup.cmd -m standalone双击启动后如下:可以访问控制台地址 访问后的…

混沌工程/混沌测试/云原生测试/云平台测试

背景 私有云/公有云/混合云等具有复杂,分布式,环境多样性等特点,许多特殊场景引发的线上问题很难被有效发现。所以需要引入混沌工程,建立对系统抵御生产环境中失控条件的能力以及信心,提高系统面对未知风险得能力。 …

DM-VIO(ROS)+t265配置运行记录(ubuntu18.04+ros melodic)

在工作中需要对DM-VIO算法进行测试,于是配置并记录了一下: 首先运行ros接口的dm-vio,一定要先配置源码 https://github.com/lukasvst/dm-vio在这个网址把源码下载下来并解压,并安装一下依赖: sudo apt-get install …

自动化运维(k8s)之微服务信息自动抓取:namespaceName、deploymentName等全解析

前言:公司云原生k8s二开工程师发了一串通用性命令用来查询以下数值,我想着能不能将这命令写成一个自动化脚本。 起初设计的 版本一:开头加一条环境变量,执行脚本后,提示输入:需要查询的命名空间&#xff0c…

【数据分析】布朗运动(维纳过程)

文章目录 一、概述二、数学布朗运动2.1 数学定义2.2 布朗运动的数学模型2.21 标准布朗运动2.22 布朗运动的路径2.23 布朗运动的方程 三、布朗运动在金融学中的应用四、数学构造(以傅里叶级数为例)4.1 傅里叶级数的基本思想4.2 构造布朗运动 一、概述 布…