vue3的ref和reactive对比

news/2024/6/20 20:16:01/文章来源:https://blog.csdn.net/liu62615/article/details/137136883

一,ref

作用: 定义一个 ref 响应式的数据
语法: const xxx = ref(initValue)

用法
创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。
JS中操作数据: xxx.value
模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>


注意
接收的数据可以是:基本类型、也可以是对象类型。
基本类型的数据:响应式依然是靠Object.defineProperty()的get与set完成的。
对象类型的数据:内部求助了Vue3.0中的一个新函数—— reactive函数。

例子(例子是JS,不是Ts)

<template><h1>个人信息</h1><h2>姓名:{{ username }}</h2><h2>性别:{{ sex }}</h2><button @click="changeInfo">修改信息</button>
</template>
<script>// 导入reactiveimport {ref} from "vue";export default {name: 'App',setup() {// 定义变量,使用ref函数响应式声明let username = ref('张三')let sex = ref('男')// 定义修改信息函数function changeInfo() {username.value = '李四'sex.value = '女'}// 返回值,上面定义的变量、函数、方法return {username,sex,changeInfo}}}
</script>

二  reactive函数

作用reactive只能定义一个对象、数组类型的响应式数据(基本类型不要用它,要用ref函数)
语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
reactive定义的响应式数据是深层次的。
内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。


例子

<template><h1>个人信息</h1><h2>姓名:{{ person.username }}</h2><h2>性别:{{ person.sex }}</h2><h2>工作:{{ person.type }}</h2><button @click="changeInfo">修改信息</button>
</template>
<script>// 导入reactiveimport {reactive} from "vue";export default {name: 'App',setup() {// 使用reactive创建对象数据类型let person = reactive({username: '张三',sex: '男',type: '全栈工程师',// 使用reactive创建数组数据类型hobby: reactive(['学习', '跑步', '编程'])})// 定义修改信息函数function changeInfo() {person.username = '李四'person.sex = '女'// reactive修改对象数据person.type = '产品经理'// reactive 修改数组数据:通过索引值修改person.hobby[0] = '打王者'}// 返回值,上面定义的变量、函数、方法return {person,changeInfo,}}}
</script>

三 reactive对比ref

从定义数据角度对比:
ref用来定义:基本类型数据。
reactive用来定义:对象(或数组)类型数据。
备注:ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象。
从原理角度对比:
ref通过Object.defineProperty()的get与set来实现响应式(数据劫持)。
reactive通过使用Proxy来实现响应式(数据劫持), 并通过Reflect操作源对象内部的数据。
从使用角度对比:
ref定义的数据:操作数据需要.value,读取数据时模板中直接读 取不需要.value。
reactive定义的数据:操作数据与读取数据:均不需要.value。

总的来说,ref更适合用于创建单个基本数据类型的响应式数据,而reactive更适合用于创建包含多个属性的响应式对象。

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

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

相关文章

低噪声、轨至轨运算放大器芯片—— D721、D722、D724,适合用于音频领域

应用领域 D721、D722、D724是我们推荐的三款低噪声、轨至轨运算放大器芯片&#xff0c;其中D721为单运放&#xff0c;D722为双运放&#xff0c;D724为四运放。适合用于音频领域、传感器等的信号放大处理&#xff0c;比如K歌宝、音响、测距、滤波器、AD转换器前级信号处理等等。…

微信小程序(黑马优购:搜索)

一.自定义搜索组件 1.修正分类页面高度 获取高度应该减去搜索框占的50px this.wh sysInfo.windowHeight - 50 2.动态修改搜索框的背景颜色和圆角 <my-search></my-search><!-- <my-search :bgcolor" green " :radius"3"></my-…

Halcon3D倾斜平面矫正至水平面

前言 在相当多的3d检测中&#xff0c;由于各种因素的干扰&#xff0c;我们所检测的平面通常并不是一个水平面&#xff0c;或者被检测的面不是水平面的情况。尤其是在倾斜面的缺陷检测和平面度检测中&#xff0c;使用被测面与拟合基准面进行计算很难做到准确的定位到缺陷的情况…

[flink 实时流基础] flink组件栈以及任务执行与资源划分

文章目录 7. Flink组件栈1. 部署层&#xff08;1&#xff09;Local模式&#xff08;2&#xff09;Cluster模式&#xff08;3&#xff09;Cloud模式 2.运行时3.API层4. 上层工具 8. 任务执行与资源划分1. 再谈逻辑视图到物理执行图2. 任务、算子子任务与算子链3. Slot与计算资源…

kubernetes(K8S)学习(五):K8S进阶(Lifecycle......偏理论)

K8S进阶&#xff08;Lifecycle......偏理论&#xff09; 一、Pod进阶学习之路1.1 Lifecycle1.2 重启策略1.3 静态Pod1.4 健康检查1.5 ConfigMap1.6 Secret1.7 指定Pod所运行的Node 二、Controller进阶学习之路2.1 Job & CronJob2.2 StatefulSet2.3 DaemonSet2.4 Horizontal…

从词表到RLHF一镜到底训练一个大模型

第6章 如何训练大语言模型 本章节主要探讨训练大语言模型的步骤和方法论。 目前,可能大家接触的最多的模型训练方式是微调,也能收到一定程度的比较好的效果,其中有代表性的项目有Github上的Alpaca, Baize,Vicuna等。 6.1 Pretrain 预训练 有了微调,为什么还需要预训练,直…

Python简单应用案例——打飞机

打飞机代码&#xff1a;搭建界面 #codingutf-8 import pygame1. 搭建界面&#xff0c;主要完成窗口和背景图的显示 if __name__ "__main__":#1. 创建一个窗口&#xff0c;用来显示内容screen pygame.display.set_mode((480,890),0,32)#2. 创建一个和窗口大小的图片…

Hack.Summit() 2024再添亮点:Morphism CEO Cecilia Hsueh确认出席

随着Web3技术的风起云涌&#xff0c;区块链行业正在全球范围内以前所未有的速度崭露头角。而在这场变革的浪潮中&#xff0c;备受瞩目的区块链盛会——Hack.Summit() 2024区块链开发者大会&#xff0c;将于2024年4月9日至10日&#xff0c;在香港数码港拉开帷幕。这不仅标志着Ha…

剑指offer--数组中重复的数字

一.题目描述 在一个长度为 n 的数组 nums 里的所有数字都在 0&#xff5e;n-1 的范围内。数组中某些数字是重复的&#xff0c;但不知道有几个数字重复了&#xff0c;也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。 算法1.排序,然后遍历,时间复杂度O(nlogn),空…

<Linux> 线程池

目录 前言&#xff1a; 一、线程池概念 &#xff08;一&#xff09;池化技术 &#xff08;二&#xff09;优点 &#xff08;三&#xff09;应用场景 二、线程池的实现 &#xff08;一&#xff09;线程池_V1&#xff08;朴素版&#xff09; &#xff08;二&#xff09;线…

67、yolov8目标检测和旋转目标检测算法batchsize=1/6部署Atlas 200I DK A2开发板上

基本思想:需求部署yolov8目标检测和旋转目标检测算法部署atlas 200dk 开发板上 一、转换模型 链接: https://pan.baidu.com/s/1hJPX2QvybI4AGgeJKO6QgQ?pwd=q2s5 提取码: q2s5 from ultralytics import YOLO# Load a model model = YOLO("yolov8s.yaml") # buil…

Js之运算符与表达式

运算符&#xff1a;也叫操作符&#xff0c;是一种符号。通过运算符可以对一个或多个值进行运算&#xff0c;并获取运算结果。 表达式&#xff1a;由数字、运算符、变量的组合&#xff08;组成的式子&#xff09;。 表达式最终都会有一个运算结果&#xff0c;我们将这个结果称…

解决 linux 服务器 java 命令不生效问题

在Linux系统中&#xff0c;当你安装Java并设置了JAVA_HOME环境变量后&#xff0c;你可能需要使用source /etc/profile命令来使Java命令生效。这是因为/etc/profile是一个系统级的配置文件&#xff0c;它包含了系统的全局环境变量设置。 但是需要注意的是&#xff0c;source /e…

关于github提交失败的问题

问题描述 Username for https://github.com: LAL-Better Password for https://LAL-Bettergithub.com: remote: Support for password authentication was removed on August 13, 2021. remote: Please see https://docs.github.com/get-started/getting-started-with-git/abo…

前端文件上传

介绍 在实际工作中前端相互传输文件时&#xff0c;前端会采用二进制&#xff0c;文本格式或者base64传输&#xff0c;要了解前端文件格式有哪些和这些格式之间怎么转换&#xff0c;先熟悉以下概念&#xff1a; files&#xff1a;文件对象的API&#xff0c;有很多对文件的操作方…

每日一题(力扣136):只出现一次的数字

利用哈希&#xff1a;时间复杂度O(n)&#xff0c;空间复杂度O(n) class Solution { public:int singleNumber(vector<int>& nums) {if (nums.size() 1){return nums[0];}unordered_map<int, int> map;int len nums.size();for (int i 0; i < len; i){if…

OpenHarmony实战:使用宏、std::bind 巧妙实现进出函数日志打印

背景 我们始终渴望了解模块的调用、时序逻辑&#xff0c;每个人都会轻易地想到在函数的入口打印一条进入 enter 相关的日志&#xff0c;在函数的出口打印一条离开 leave 相关的日志。不能有遗漏&#xff0c;我们会复制这条日志到所有关心的函数中&#xff0c;为了表明是哪个模…

备考ICA----Istio实验14---出向流量管控Egress Gateways实验

备考ICA----Istio实验14—出向流量管控Egress Gateways实验 1. 发布测试用 pod kubectl apply -f istio/samples/sleep/sleep.yaml kubectl get pods -l appsleep2. ServiceEntry 创建一个ServiceEntry允许流量访问edition.cnn.com egressgw/edition-ServiceEntry.yaml api…

HDLbits 刷题 -- Always case

学习&#xff1a; Case statements in Verilog are nearly equivalent to a sequence of if-elseif-else that compares one expression to a list of others. Its syntax and functionality differs from the switch statement in C. always (*) begin // This is a comb…

【PostgreSQL】用pgAdmin轻松管理PostgreSQL

pgAdmin 是一个功能强大的开源Web界面工具&#xff0c;专为管理和维护PostgreSQL数据库而设计。它提供了一个直观的图形界面&#xff0c;使得用户能够轻松地执行复杂的数据库操作&#xff0c;如查询、更新、导入/导出数据以及管理数据库对象等。pgAdmin 支持几乎所有的PostgreS…