Vue3:ref和reactive实现响应式数据

一、情景说明

Vue2中,我们已经知道数据的响应式,是什么含义
就是,在data块中,定义的变量,在页面中引用后
任何地方修改了该变量,页面中引用的变量会立即显示最新数值。

这块,我们学习了
插值语法:{{}}
单向绑定指令:v-bind
双向绑定指令:v-model

那么,在Vue3中,没有了data块,如何实现数据的响应式了?

二、响应式数据

Person.vue组件

<template><div class="person"><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><h2>地址:{{address}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script lang="ts" setup name="Person">// 数据,原来是写在data中的,此时的name、age、tel都不是响应式的数据let name = '张三'let age = 18let tel = '13888888888'let address = '北京昌平区宏福苑·宏福科技园'// 方法function changeName() {name = 'zhang-san' //注意:这样修改name,页面是没有变化的console.log(name) //name确实改了,但name不是响应式的}function changeAge() {age += 1 //注意:这样修改age,页面是没有变化的console.log(age) //age确实改了,但age不是响应式的}function showTel() {alert(tel)}
</script>

1、ref实现基本类型的数据响应式

针对上面的组件,我们想要实现name、age两个变量的数据响应式效果。
script引用函数:

import {ref} from 'vue'

创建变量:

  let name = ref('张三')let age = ref(18)

读取变量:

        <h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2>

修改变量:
JS中操作ref创建的变量时候需要.value

  // 方法function changeName() {name.value = 'zhang-san'}function changeAge() {age.value += 1 }

2、ref实现对象类型的数据响应式

底层是reactive实现的功能
script引用函数:

import {ref} from 'vue'

创建变量:

  let car = ref({brand:'奔驰',price:100})let games = ref([{id:'aysdytfsatr01',name:'王者荣耀'},{id:'aysdytfsatr02',name:'原神'},{id:'aysdytfsatr03',name:'三国志'}])

读取变量:

 <h2>汽车信息:一辆{{car.brand}}车,价值{{car.price}}万</h2><li v-for="g in games" :key="g.id">{{g.name}}</li>

修改变量:
JS中操作ref创建的变量时候需要.value

  function changePrice(){car.value.price += 10console.log(car.value.price)}function changeFirstGame(){games.value[0].name = '流星蝴蝶剑'}

3、reactive实现对象类型的数据响应式

script引用函数:

import {reactive} from 'vue'

创建变量:
创建了3个响应式对象数据

  // 数据// 单个对象数据let car = reactive({brand:'奔驰',price:100})// 数组型对象let games = reactive([{id:'aysdytfsatr01',name:'王者荣耀'},{id:'aysdytfsatr02',name:'原神'},{id:'aysdytfsatr03',name:'三国志'}])// 多层次对象let obj = reactive({a:{b:{c:666}}})

读取变量:

 <h2>汽车信息:一辆{{car.brand}}车,价值{{car.price}}万</h2><li v-for="g in games" :key="g.id">{{g.name}}</li><h2>测试:{{obj.a.b.c}}</h2>

修改变量:

    // 方法function changePrice(){car.price += 10console.log(car.price)}function changeFirstGame(){games[0].name = '流星蝴蝶剑'}function changeObj(){obj.a.b.c = 999}

4、注意事项

reactive创建的对象变量,被重新分配一个新对象时,会失去响应式效果
ref创建的对象类型变量,不存在这个问题。
问题重现:
reactive定义一个对象类型的变量

    let car = reactive({brand:'奔驰',price:100})

需求:
给car重新赋值一个对象
无效写法:

car = {brand:'奥拓',price:1}
car = reactive({brand:'奥拓',price:1})

有效写法:

Object.assign(car,{brand:'奥拓',price:1})

三、对比

  • 宏观角度看:
  1. ref用来定义:基本类型数据对象类型数据

  2. reactive用来定义且只能定义:对象类型数据

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

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

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

相关文章

Leetcode : 1122. 数组的相对排序

思路&#xff1a;计数排序&#xff0c;然后根据计数的数组序列重构数组&#xff0c;针对多余的数组元素采取sort函数进行升序排列加在末尾即可。 #include <iostream> #include <vector> #include <algorithm>using namespace std;class Solution { public:v…

ChatGPT消息发不出去了?我找到解决方案了

现象 今天忽然发现 ChatGPT无法发送消息&#xff0c;能查看历史对话&#xff0c;但是无法发送消息。 猜测原因 出现这个问题的各位&#xff0c;应该都是点击登录后顶部弹窗邀请[加入多语言 alapha 测试]了&#xff0c;并且语言选择了中文&#xff0c;抓包看到ab.chatgpt.com…

win11修改主机mac地址

很多时候&#xff0c;为了限制恶意的蹭流浪&#xff0c;除了分配固定的ip地址外&#xff0c;还限制mac地址。只有mac与ip一致&#xff0c;才能上网冲浪 网络适配器中修改 搜索“控制面板”打开 控制面板 > 网络和Internet > 网络和共享中心 >查看网络状态和任务>…

【操作系统学习笔记】文件管理1.9

【操作系统学习笔记】文件管理1.9 参考书籍: 王道考研 视频地址: Bilibili 文件保护 口令保护 为文件设置一个口令&#xff0c;用户请问访问该文件时必须提供口令交由系统验证 优点 保存口令的空间开销小验证口令的时间开销小 缺点 正确的口令存放在系统内部&#xff0c;不…

kafka 可视化工具

kafka可视化工具 随着科技发展&#xff0c;中间件也百花齐放。平时我们用的redis&#xff0c;我就会通过redisInsight-v2 来查询数据&#xff0c;mysql就会使用goland-ide插件来查询&#xff0c;都挺方便。但是kafka可视化工具就找了半天&#xff0c;最后还是觉得redpandadata…

【框架】React和Vue的异同

1. 前言 React对于原生JS要求会高一级&#xff0c;国外React用的多&#xff0c;国内Vue用的多。 2. 共同点 组件化函数式编程 &#xff08;vue3函数式编程、vue2声明式编程&#xff09;单向数据流&#xff0c;数据驱动视图VirtualDOM Diff算法操作DOM社区成熟&#xff0c;…

在哪里能找到抖音短视频素材?推荐热门的抖音短视频素材下载资源

哎呦喂&#xff0c;小伙伴们&#xff0c;是不是在短视频的大海里划船&#xff0c;想找到那颗能让你起飞的珍珠&#xff0c;但又觉得素材难寻如针海捞针&#xff1f;别急&#xff0c;今天我就来给你们送上几个超实用的宝藏素材网站&#xff0c;让你的短视频创作不再愁素材 1&am…

Docker容器的操作

目录 运行容器 查看容器 查看容器详细信息 删除容器 启动容器 停止容器 重启容器 暂停容器 激活容器 杀死容器 进入容器 常用 查看容器的日志 拷贝容器的文件到本地 容器改名 查看容器资源 查看容器内部的进程 监测容器发生的事件 检测容器停止以后的反回值…

网站维护中的风险及应对策略

在现代数字化时代&#xff0c;企业对网站的维护至关重要&#xff0c;但维护期间也存在着风险和潜在威胁。本文将探讨网站维护中可能面临的风险&#xff0c;并提供一些应对策略以降低这些风险对企业的影响。 一、数据泄露&#xff1a; 在网站维护期间&#xff0c;未经适当保护的…

RK3568驱动指南|第十三篇 输入子系统第(137章 初识input子系统)

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…

揭秘红外测温枪方案设计

红外额温枪也叫红外测温仪&#xff0c;可以快速准确地测量出人体的温度。使用时只需将探头对准额头&#xff0c;按下按钮即可。我司提供的额温枪方案设计采用红外传感器收集物体红外线转变为微弱的mV—uV级别电压信号&#xff0c;在经过电压的放大&#xff0c;通过MCU的控制&am…

【MQ】消息队列概述

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;MQ ⛺️稳中求进&#xff0c;晒太阳 定义 消息队列&#xff1a;一般我们简称为MQ(Message Queue) Message Queue :消息队列中间件&#xff0c;很多初学者认为&#xff0c;MQ通过消息的发送…

[密码学]入门篇——加密方式

一、概述 加密方法主要分为两大类&#xff1a; 单钥加密&#xff08;private key cryptography&#xff09;&#xff1a;加密和解密过程都用同一套密码双钥加密&#xff08;public key cryptography&#xff09;&#xff1a;加密和解密过程用的是两套密码 历史上&#xff0c…

马斯克回应OpenAI:Change your name

最近&#xff0c;整个AI圈都在关注OpenaAI和SpaceX首席执行官埃隆马斯克的官司。继OpenAI驳回“埃隆的所有主张”&#xff08;dismiss "all of Elons claims"&#xff09;之后&#xff0c;今日马斯克在OpenaAI的X推文下锐评“请更换你的名字”&#xff08;"Chan…

position定位学习

加了绝对定位的盒子不能通过margin:0 auto水平居中 脱标元素不会产生外边距合并问题

重读 Java 设计模式: 探索经典之道与 Spring 框架的设计

写在开头 记得大学刚毕业那会儿&#xff0c;想学点东西&#xff0c;于是拿出了《Head First 设计模式》这本书&#xff0c;就开始了阅读&#xff0c;我曾对这些模式感到晦涩难懂。然而&#xff0c;随着工作岁月的增长&#xff0c;我逐渐领悟到设计模式的价值&#xff0c;尤其是…

Linux病毒扫描工具

介绍&#xff1a; ClamAV 是一款开源的防病毒引擎&#xff0c;用于检测各类恶意软件。其特色是提供命令行扫描&#xff0c;定制病毒数据库更新&#xff0c;以及对新病毒的快速反应。适用于各种系统&#xff0c;包括 Windows、Mac 以及 Linux 等。本教程将指导你如何安装、配置和…

使用 Docker 部署 File Browser 文件管理系统

1&#xff09;File Browser 介绍 官网&#xff1a;https://filebrowser.org/ GitHub&#xff1a;https://github.com/filebrowser/filebrowser 今天为大家分享一款开源的私有云盘项目&#xff1a;File Browser&#xff0c;简单实用、轻量级、跨平台&#xff0c;安装部署简单快…

查询标准分词器结果

查询标准分词器结果 POST _analyze {"analyzer": "standard","text": "2024-03-04 11:05:14,717 $53668-qd_agent_1 __main__ INFO abc.py: #341 got line:1709521514 385485820 43ba7aaf-e6e3-4571-bb2d-d1b477baf52b qd abc 23 65741695…

Mysql按照月份分组统计数据,当月无数据则填充0

目录 起因实现结论 起因 最近有个需求需要在sql中实现获取近半年的统计数据&#xff0c;本来以为挺简单的&#xff0c;不过这个项目数据基本没有&#xff0c;在此情况下还要实现获取近半年的数据就没办法简单group by了 实现 #如果每个月都有数据的话是比较简单的 SELECT DA…