当前位置: 首页 > 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;则说明整体油量不足以走完…...

从Office功能区的“局外人“到“掌控者“:Office RibbonX Editor深度指南

从Office功能区的"局外人"到"掌控者"&#xff1a;Office RibbonX Editor深度指南 【免费下载链接】office-ribbonx-editor An overhauled fork of the original Custom UI Editor for Microsoft Office, built with WPF 项目地址: https://gitcode.com/g…...

转行网络安全运维:从0到1的可落地指南

转行网络安全运维&#xff1a;从0到1的可落地指南 一、 「3个核心技能&#xff1a;从零起步也能会」 网上学习资料多到爆炸&#xff0c;不用纠结“哪个最好”&#xff0c;记住一句话&#xff1a;**能学会、能上手的就是好的**&#xff01;不管是免费视频还是付费课&#xff0c…...

保姆级教程:Windows系统下Arcgis 10.2从下载、安装到汉化一次搞定(附常见License启动失败解决方案)

Windows系统下Arcgis 10.2完整安装与汉化实战指南第一次接触Arcgis的新手往往会被复杂的安装流程和神秘的License Manager搞得晕头转向。作为一款功能强大的地理信息系统软件&#xff0c;Arcgis在科研、城市规划、环境监测等领域有着广泛应用&#xff0c;但它的安装过程确实会让…...

高精度光照检测

光线检测仪&#xff0c;kotlin开发&#xff0c;调用手机感光模块检测室内外光照强度&#xff0c;用途多多&#xff0c;我主要用途孩子写作业检测光照保护视力。 食用方法∶打开即测&#xff0c;速度快&#xff0c;无广告&#xff0c;手机平视即可&#xff0c;无须直视光线。 买…...

【python】ImportError: DLL load failed while importing QtWidgets: 找不到指定的程序。重新安装后搞定

文章目录前言一、PyQt6引用后报错二、使用步骤总结前言 想做个好看的界面&#xff0c;引用了PyQt6&#xff0c;却产生了新问题。 pip install pyqt6-tools&#xff0c;优先做这个动作进行修复。 一、PyQt6引用后报错 python里引用&#xff1a; from PyQt6.QtWidgets import…...

别再手动测模型了!用Simulink Test Manager实现自动化测试(附Excel表格配置详解)

从手动测试到智能验证&#xff1a;Simulink Test Manager全流程自动化实战指南 在模型开发的迭代过程中&#xff0c;工程师们常常陷入"修改-测试-记录"的循环泥潭。每次参数调整后&#xff0c;手动运行模型、记录数据、比对结果不仅消耗大量时间&#xff0c;更可能因…...

java项目011-ssm 宠物医院系统

java项目011-ssm 宠物医院系统 是一款基于springspringmvcmybatis的宠物系统&#xff0c; 包含界面布局、医生信息管理、客户信息管理、宠物管理、浏览管理、 诊断管理、医生管理、用户管理 其中医生管理、用户管理只能管理员有权限进行操作。 采用spingboot方式启动 运行截图...

ComfyUI-WD14-Tagger:3分钟实现AI智能图像标签提取,效率提升10倍

ComfyUI-WD14-Tagger&#xff1a;3分钟实现AI智能图像标签提取&#xff0c;效率提升10倍 【免费下载链接】ComfyUI-WD14-Tagger A ComfyUI extension allowing for the interrogation of booru tags from images. 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-WD14-…...

Unity中MMD初音资源导入与动画落地全流程指南

1. 这不是普通模型包&#xff1a;初音跳舞资源在Unity中的真实价值定位“Unity初音跳舞精品模型动画资源分享”——看到这个标题&#xff0c;很多刚接触Unity的美术向开发者第一反应是&#xff1a;“哇&#xff0c;能直接放进项目里做Demo了&#xff01;”但我在带三个独立游戏…...

如何让旧款Mac运行最新系统:OpenCore Legacy Patcher完整指南

如何让旧款Mac运行最新系统&#xff1a;OpenCore Legacy Patcher完整指南 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 想让你的老旧Mac设备重新焕发活力&a…...