当前位置: 首页 > news >正文

响应式ref()和reactive()

文章目录

  • ref()
  • reactive()
  • ref对比reactive
  • toRefs与toRef


ref()

  • 作用:定义响应式变量。

  • 语法:let xxx=ref(初始值)。

  • 返回值:一个RefImpl的实例对象,简称ref对象或ref,ref对象的value属性是响应式的

  • 注意点

    1. JS中操作数据需要:xxx.value,但模板中不需要.value,直接使用即可。
    2. 对于let name =ref(‘张三’)来说,name不是响应式的,name.value是响应式的

reactive()

  • 作用:定义响应式对象(基本类型不要用它,要用ref,否则报错)。

  • 语法:let 响应式对象=reactive(源对象)。

  • 返回值:一个Proxy的实例对象,简称响应式对象。

  • 注意点:reactive定义的响应式数据是“深层次”的。

ref对比reactive

  • 宏观角度看:
    1. ref用来定义:基本类型数据、对象类型数据;
    2. reactive用来定义:对象类型数据。
  • 区别:
    1. ref 创建的变量必须使用,value(可以使用volar插件自动添加,value)。
    2. reactive 重新分配一个新对象,会失去响应式(可以使用0bject.assign去整体替换)。
  • 使用原则:
    1. 若需要一个基本类型的响应式数据,必须使用ref。
    2. 若需要一个响应式对象,层级不深,ref、reactive都可以。
    3. 若需要一个响应式对象,且层级较深,推荐使用reactive。

toRefs与toRef

作用:将一个响应式对象中的每一个属性,转换为ref对象。
备注:toRefs与toRef功能一致,但toRefs可以批量转换。
语法如下:

import {reactive,toRefs,toRef} from
// 数据
let person = reactive({name:'张三age:18
})
let {name,age} = toRefs(person)
let nl = toRef(person,'age')

相关文章:

响应式ref()和reactive()

文章目录 ref()reactive()ref对比reactivetoRefs与toRef ref() 作用:定义响应式变量。 语法:let xxxref(初始值)。 返回值:一个RefImpl的实例对象,简称ref对象或ref,ref对象的value属性是响应式的 注意点&#xff1…...

运维系列.Nginx中使用HTTP压缩功能

运维专题 Nginx中使用HTTP压缩功能 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550…...

vue3项目图片压缩+rem+自动重启等plugin使用与打包配置

一、Svg配置 每次引入一张 SVG 图片都需要写一次相对路径,并且对 SVG 图片进行压缩优化也不够方便。 vite-svg-loader插件加载SVG文件作为Vue组件,使用SVGO进行优化。 插件网站https://www.npmjs.com/package/vite-svg-loader 1. 安装 pnpm i vite-svg…...

数据库性能优化系统设计

设计一个数据库性能优化系统,目标是监测、诊断并改善数据库的运行效率,确保系统能够高效稳定地处理大量数据请求。以下是一个概要设计,包括关键模块、功能和实现思路: 1. 系统架构 分布式监控中心:采用分布式架构收集…...

MyBatisPlus-分页插件的基本使用

目录 配置插件 使用分页API 配置插件 首先,要在配置类中注册MyBatisPlus的核心插件,同时添加分页插件。(可以放到config软件包下) 可以看到,我们定义了一个配置类,在配置类里声明了一个Bean,这个Bean的名…...

深入探索Python库的奇妙世界:赋能编程的无限可能

在编程的浩瀚宇宙中,Python以其简洁的语法、强大的功能和广泛的应用领域,成为了众多开发者心中的璀璨明星。而Python之所以能够如此耀眼,很大程度上得益于其背后庞大的库生态系统。这些库,如同一块块精心雕琢的积木,让…...

力扣爆刷第161天之TOP100五连刷71-75(搜索二叉树、二维矩阵、路径总和)

力扣爆刷第161天之TOP100五连刷71-75(搜索二叉树、二维矩阵、路径总和) 文章目录 力扣爆刷第161天之TOP100五连刷71-75(搜索二叉树、二维矩阵、路径总和)一、98. 验证二叉搜索树二、394. 字符串解码三、34. 在排序数组中查找元素的…...

你真的了解Java内存模型JMM吗?

哈喽,大家好🎉,我是世杰。 本文我为大家介绍面试官经常考察的**「Java内存模型JMM相关内容」** 面试连环call 什么是Java内存模型(JMM)? 为什么需要JMM?Java线程的工作内存和主内存各自的作用?Java缓存一致性问题?Java的并发编程问题? …...

Springboot整合Jsch-Sftp

背景 开发一个基于jsch的sftp工具类&#xff0c;方便在以后的项目中使用。写代码的过程记录下来&#xff0c;作为备忘录。。。 Maven依赖 springboot依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-par…...

生成随机的验证码图片(Python)

文章目录 一、导入包二、生成随机的验证码三、生成随机的rgb颜色四、生成图片验证码总结&#xff1a; 一、导入包 import random from PIL import Image, ImageDraw, ImageFont二、生成随机的验证码 def random_code(length4):默认返回4位随机验证码&#xff0c;字符串code …...

0/1背包问题总结

文章目录 &#x1f347;什么是0/1背包问题&#xff1f;&#x1f348;例题&#x1f349;1.分割等和子集&#x1f349;2.目标和&#x1f349;3.最后一块石头的重量Ⅱ &#x1f34a;总结 博客主页&#xff1a;lyyyyrics &#x1f347;什么是0/1背包问题&#xff1f; 0/1背包问题是…...

模电基础 - 放大电路的频率响应

目录 一. 简介 二. 频率响应的基本概念 三. 波特图 四. 晶体管的高频等效模型 五. 场效应管的高频等效模型 六. 单管放大电路的频率响应 七.多级放大电路的频率响应 八. 频率响应与阶跃响应 一. 简介 放大电路的频率响应是指在输入不同频率的正弦信号时&#xff0c;电路…...

Java 8 到 Java 22 新特性详解

Java 8 到 Java 22 新特性详解 Java自发布以来一直在不断演进&#xff0c;添加新特性以提升开发效率和性能。本文将介绍Java 8到Java 22的主要新特性&#xff0c;帮助开发者了解各版本的新功能和改进。 Java 8 (2014) 1. Lambda 表达式 Lambda 表达式允许使用简洁的语法定义…...

华为OD机试题-提取字符串中最长数学表达式

题目描述 https://blog.csdn.net/weixin_51055612/article/details/139841128 题目描述 提取字符串中的最长合法简单数学表达式&#xff0c;字符串长度最长的&#xff0c;并计算表达式的值。如果没有&#xff0c;则返回0。 简单数学表达式只能包含以下内容&#xff1a;0-9数字&…...

专家指南:如何为您的电路选择理想的压敏电阻或热敏电阻

保护和维持电路功能需要两种设备&#xff1a;压敏电阻和热敏电阻。这两个电气元件有时会因后缀相似而混淆&#xff0c;但它们具有不同且重要的用途。 由于这种混淆&#xff0c;我们需要准确地了解这些组件是什么&#xff0c;这就是本文将要讨论的内容——应用程序、作用、优点…...

基于主流SpringBoot进行JavaWeb开发的学习路线

目录 一、学习路线 &#xff08;1&#xff09;第一部分&#xff08;Web前端开发的技术栈&#xff09; &#xff08;2&#xff09;第二部分&#xff08;Web后端开发&#xff09; 二、学习之后必备的技能 三、学习Web开发的基础与未来的收获 学完这一类知识目标&#xff1a;…...

医疗机器人中的具身智能进展——自主超声策略模型的任务编码和局部探索

医疗机器人一直是具身智能的研究热点。医学图像、医疗触诊、血压血氧、心率脉搏和生物电信号等多模态生物医学信息&#xff0c;不断丰富着医疗机器人的感知范畴。 自主超声 “自主超声”属于具身智能医疗机器人领域中话题度较高的研究方向。作为临床检查的重要手段之一&#…...

探索人工智能在电子商务平台与游戏发行商竞争中几种应用方式

过去 12 年来&#xff0c;电脑和视频游戏的发行策略发生了巨大变化。数字游戏的销量首次超过实体游戏的销量 在20132020 年的封锁进一步加速了这一趋势。例如&#xff0c;在意大利&#xff0c;封锁的第一周导致数字游戏下载量 暴涨174.9%. 展望未来&#xff0c;市场有望继续增…...

【Altium】AD-网络版一个用户非人为异常占用多个License的解决方法

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 当出现一个用户同时占用多个授权&#xff0c;又无法单独释放一个授权的情况下&#xff0c;该如何解决。 2、 问题场景 一个用户获取网络版授权后&#xff0c;AD会自动重复获取授权&#xff0c;直到该license下所有授…...

*算法训练(leetcode)第二十五天 | 134. 加油站、135. 分发糖果、860. 柠檬水找零、406. 根据身高重建队列

刷题记录 134. 加油站135. 分发糖果860. 柠檬水找零406. 根据身高重建队列 134. 加油站 leetcode题目地址 记录全局剩余油量和当前剩余油量&#xff0c;当前剩余小于0时&#xff0c;其实位置是当前位置的后一个位置。若全局剩余油量为负&#xff0c;则说明整体油量不足以走完…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

基于Java+VUE+MariaDB实现(Web)仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...