Vue3的reactive、ref、toRef、toRefs用法以及区别

在 Vue3 中,reactive, ref, toRef, toRefs 都是用于创建响应式数据的方法。它们之间的主要区别在于它们的使用方式和返回值类型。

  1. reactive:用于将一个普通对象转换为响应式对象。当对象的属性发生变化时,视图会自动更新。
import { reactive } from 'vue';const state = reactive({count: 0,info: {name: '张三',age: 18}
});
  1. ref:用于创建一个响应式的引用对象。它接受一个参数,可以是基本类型(如数字、字符串等),也可以是对象。当引用的值发生变化时,视图会自动更新。
import { ref } from 'vue';const count = ref(0);
const info = ref({name: '张三',age: 18
});
  1. toRef:用于创建一个响应式的引用对象,与 ref 类似,但它接受一个对象作为参数。当对象的属性发生变化时,视图会自动更新。
import { toRef } from 'vue';const state = reactive({info: {name: '张三',age: 18}
});const nameRef = toRef(state, 'info.name');
const ageRef = toRef(state, 'info.age');
  1. toRefs:用于将一个响应式对象的所有属性转换为单独的响应式引用对象。这样可以让代码更易于理解和维护。
import { reactive, toRefs } from 'vue';const state = reactive({count: 0,info: {name: '张三',age: 18}
});const { count, info } = toRefs(state);

总结:reactive 用于创建响应式对象,可以包含嵌套的对象;reftoRef 用于创建响应式的引用对象,只能包含基本类型或对象的某个属性;toRefs 用于将响应式对象的所有属性转换为单独的响应式引用对象。

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

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

相关文章

代洋集团:打造太阳能光伏电站的新标杆

随着全球对可再生能源的关注度不断提高,代洋集团以其卓越的技术和高效的运营,引领太阳能光伏电站的发展。通过持续的创新和研发,代洋集团成功构建了具有行业领先水平的太阳能光伏电站,为全球绿色能源产业贡献力量。 代洋集团的太…

python循环调用http示例(一定时间duration内,每隔时间interval去调用一次)call_http()

文章目录 直接上代码 直接上代码 #!/usr/bin/env python3 # -*- coding: utf-8 -*- import requests encoding utf-8def call_http_duration(server_ip, duration, interval):"""在时间 duration 内,每隔interval去调用 call_http(server_ip) 函数…

linux获得帮助_如何查看命令的用法、作用

Linux获得帮助 多层次的帮助: whatis command --help man and info /usr/share/doc/ Red Hat documentation 、Ubuntu documentation 软件项目网站 其它网站 搜索 whatis 使用数据库来显示命令的简短描述。 [rootlocalhost ~]# whatis rm rm (1) …

详解Object.defineProperty()方法

Object.defineProperty是一个用于定义或修改对象属性的方法。它提供了一种更底层和灵活的方式来定义属性,可以设置属性的配置(如可枚举性、可配置性、可写性等),并且可以定义属性的getter和setter函数。 语法: Objec…

【华为OD题库-042】战场索敌-java

题目 有一个大小是N * M的战场地图,被墙壁’#‘分隔成大小不同的区域,上下左右四个方向相邻的空地∵,属于同一个区域,只有空地上可能存在敌人’E’,请求出地图上总共有多少区域里的敌人数小于K。 输入描述 第一行输入为…

WT588FM01高性能录音语音芯片模块IC:远距离录音,卓越音质,多功能一体

在音频技术不断进步的今天,一款高性能的录音模块对于很多产品来说都是不可或缺的。唯创知音的WT588FM01就是这样一款令人瞩目的高性能录音语音芯片模块。它拥有远距离录音能力,出色的音质,以及直接推动8ohm/0.5W喇叭输出的功能,为…

【传送点】上千漏洞复现复现集合 exp poc 持续更新

一 简介 二 传送 【漏洞复现】OpenTSDB 2.4.0 命令注入(CVE-2020-35476)漏洞复现 【漏洞复现】熊海cms 存在sql注入 附poc 【漏洞复现】Array VPN任意文件读取漏洞 【漏洞复现】好视通视频会议系统(fastmeeting) toDownload.do接口存在任意文件读取漏洞 附POC 【漏洞复现】金…

Lesson 08 string类 (上)

C:渴望力量吗,少年? 文章目录 一、STL1. 概念2. STL的六大组件3. STL的重要性 二、string类的介绍与使用1. 介绍2. 使用(1)string类对象的常见构造(2)string类对象的容量操作(3&…

数字人透明屏幕是如何工作的?

数字人透明屏幕是一种令人兴奋的科技产品,它结合了人脸识别、全息影像技术以及透明屏幕,为人们带来了全新的互动体验。本文将详细介绍数字人透明屏幕的工作原理以及其应用场景。 工作原理 数字人透明屏幕的工作原理主要包括人脸识别和全息影像技术。人脸…

数学建模-基于LightGBM和BP神经网络的互联网招聘需求分析与预测

基于LightGBM和BP神经网络的互联网招聘需求分析与预测 整体求解过程概述(摘要) 就业是民生之本,是发展之基,也是安国之策。2020 年新冠肺炎疫情的爆发,稳就业成为应对疫情、稳定社会的重要保障之一。随着数据新动能的发展,互联网…

Python与设计模式--责任链模式

23种计模式之 前言 (5)单例模式、工厂模式、简单工厂模式、抽象工厂模式、建造者模式、原型模式、(7)代理模式、装饰器模式、适配器模式、门面模式、组合模式、享元模式、桥梁模式、(11)策略模式、责任链模式、命令模式、中介者模…

LeetCode52. N-Queens II

文章目录 一、题目二、题解 一、题目 The n-queens puzzle is the problem of placing n queens on an n x n chessboard such that no two queens attack each other. Given an integer n, return the number of distinct solutions to the n-queens puzzle. Example 1: I…

用CHAT总结费曼学习法的关键

问CHAT:费曼学习法的关键 CHAT回复:费曼学习法是由著名物理学家理查德费曼所发明的一种学习方法,旨在以深入理解为目标,帮助自己学习新的知识和技能。 费曼学习法有四个关键步骤: 1. 学习:首先&#xff0…

阿里云服务器2核2G3M配置购买和续费同享99元1年,最后2天赶紧囤货

经济型e实例2核2G 3M固定带宽 40G ESSD Entry云盘,价格为99元1年,这款云服务器是阿里云在11月份推出的特价云服务器,不管是用户还是老用户,都觉得这个价格确实非常划算,但是有的用户觉得现在暂时没有使用云服务器的需求…

​LeetCode解法汇总1670. 设计前中后队列

目录链接: 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目: https://github.com/September26/java-algorithms 原题链接:力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 描述: 请你设计一…

Es6笔记之箭头函数与解构赋值

目录 箭头函数 箭头函数 this 箭头函数与普通函数的区别 解构赋值 数组解构 对象解构 展开运算符 与 剩余运算符 箭头函数 箭头函数是一种声明函数的简洁语法&#xff0c;它与普通函数并无本质的区别&#xff0c;差异性更多体现在语法格式上。 <script>// const …

LLM大语言模型

大语言模型的定义 大语言模型&#xff08;英文&#xff1a;Large Language Model&#xff0c;缩写LLM&#xff09;&#xff0c;也称大型语言模型&#xff0c;是一种人工智能模型&#xff0c;旨在理解和生成人类语言。它们在大量的文本数据上进行训练&#xff0c;可以执行广泛的…

在Rust中处理命令行参数和环境变量

1.摘要 Rust的命令行和环境变量处理在标准库中提供了一整套实现方法, 在本文中除了探索标准库的使用方法之外, 也在不断适应Rust独有的语法特点。在本文中, 我们通过标准库函数的返回值熟悉了迭代器的使用方法, 操作迭代器精确控制保存的内容, 包括字符串和键值对的使用方法。…

美创科技受邀亮相第二届全球数字贸易博览会

11月23日-27日&#xff0c;由浙江省人民政府、商务部共同主办的第二届全球数字贸易博览会&#xff08;以下简称“数贸会”&#xff09;圆满落幕。围绕“国家级、国际性、数贸味”的目标定位&#xff0c;以“数字贸易 商通全球”为主题&#xff0c;数贸会重点展示数字贸易全产业…

伪原创工具,免费的5款伪原创工具

寻找一款合适的伪原创工具是提高写作效率的重要一环。在这里&#xff0c;我们为您推荐了五款不同特点的伪原创工具&#xff0c;并对它们进行了详细的测评。 第一款伪原创工具&#xff1a;147SEO改写 147SEO改写是一款强大的AI智能伪原创写作工具&#xff0c;具备多个模板供用…