Vue-响应式数据

一、ref创建基本类型的响应式数据

vue3可以使用ref、reactive去定义响应式数数据。

知识点汇总

  • 使用ref需要先引入ref,import {ref} from 'vue'
  • 在模板 template 中使用了添加ref 的响应式数据,变量的后面不用添加.value
  • 所有js代码里面,去操作res包裹的东西,必须要加上 .value
  • 使用ref包裹的变量,都变成了对象,其中不带下划线的value 是提供我们自己使用的。
  • ref可以定义基本类型、对象类型的响应式数据。

这个value中就是真正的变量数据。

Person.vue组件中的代码:

<template><div class="person"><!-- 模板里面不用 name.value,自动帮你加上.value --><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><h2>地址:{{address}}</h2><button @click="changeName">修改名字</button> <button @click="changeAge">增加年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script setup lang="ts" name="Person">//引入ref,所有js代码里面,去操作res包裹的东西,必须要加上 .valueimport {ref} from 'vue' //数据let name = ref('张三') // 注意ref是函数let age = ref(18) let tel = 13888888888let address = '河北 . 邯郸'console.log(1,name)console.log(2,age)//方法function changeName(){name.value = 'zhang-san' console.log(1,name.value)} function changeAge(){age.value += 1console.log(2,age.value) } function showTel(){alert(tel)} 
</script><style scoped>.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button{margin: 0 5px;}
</style>

二、reactive创建对象类型的响应式数据

reactive用于定义对象类型的数据

知识点汇总:

  • 使用reactive()可以把对象类型的数据变成响应式的。
  • 数组也是对象,也可以使用reactive()去包裹数组。
  • reactive定义的对象类型的响应式数据是深层次的。
  • reactive只能定义对象类型的响应式数据。
<template><div class="person"><h2>一辆{{car.brand}}价值{{car.price}}</h2><button @click="changePrice">修改汽车的价格</button> <hr><ul>                        <!--:” 就是把 “g.id” 当成js表达式去解析--><li v-for="g in games" :key="g.id">{{g.name}}</li></ul><button @click="changeFirstGame">修改第一个游戏的名字</button><hr><h2>测试:{{obj.a.b.c}}</h2><button @click="changeC">修改第一个 c 的数字</button></div>
</template><script setup lang="ts" name="Person">//引入reactiveimport {reactive} from 'vue'//使用 reactive 把car对象 变成响应式的//使用reactive(对象类型) 将对象类型的数据  变成响应式的let car = reactive({brand:'奔驰',price:100})console.log(car) //打印出来对象类型的数据存放在 Target 中//定义数组,数组也是对象//使用reactive(数组) 将数组类型的数据 变成响应式的let games = reactive([{id:'hjhdjshj01',name:'穿越火线'},{id:'hjhdjshj02',name:'王者荣耀'},{id:'hjhdjshj03',name:'原神'},])//reactive定义的对象类型的响应式数据是深层次的let obj = reactive({a:{b:{c:666}}})//方法function changePrice(){car.price += 10}function changeFirstGame(){games[0].name = '恐龙快打'}//reactive定义的对象类型的响应式数据是深层次的function changeC(){obj.a.b.c = 777}
</script><style scoped>.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button{margin: 0 5px;}
</style>

三、ref创建对象类型的响应式数据

注意: 使用ref处理对象类型的数据时在js代码中不要忘了加上 .value

ref 处理对象类型的数据底层用的是reactive

<script setup lang="ts" name="Person">let car = ref({brand:'奔驰',price:100})let car1 = reactive({brand:'奔驰',price:100})console.log(car)console.log(car1)
</script>

<template><div class="person"><h2>一辆{{car.brand}}价值{{car.price}}</h2><button @click="changePrice">修改汽车的价格</button> <hr><ul>                        <li v-for="g in games" :key="g.id">{{g.name}}</li></ul><button @click="changeFirstGame">修改第一个游戏的名字</button></div>
</template><script setup lang="ts" name="Person">//引入 refimport {ref} from 'vue'//使用 ref 把car对象 变成响应式的let car = ref({brand:'奔驰',price:100})//定义数组,数组也是对象let games = ref([{id:'hjhdjshj01',name:'穿越火线'},{id:'hjhdjshj02',name:'王者荣耀'},{id:'hjhdjshj03',name:'原神'},])//方法function changePrice(){car.value.price += 10}function changeFirstGame(){games.value[0].name = '恐龙快打'}</script><style scoped>.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button{margin: 0 5px;}
</style>

四、ref对比reactive

通过Volar插件自动添加 .value

勾选上 Dot Value

如果sum是被 ref() 包裹的数据赋予的,输入sum 便会自动填充.value

知识总结:

  1. reactive 重新分配一个新对象,会失去响应式(可以使用Object.assign去整体替换)。
  2. Object.assign(obj1,obj2,obj3),表示把 obj2、obj3 中的每一组key-value组合都加在 obj1上,obj1原先的内容会被覆盖。
  3. 对于用 reactive 包裹的对象,如果要整体修改对象需要使用Object.assign(obj1,obj2,obj3)
  4. 如果用的是 ref 包裹的对象,可以直接使用对象进行赋值。也是响应式的。
  5. ref 带 .value 必然是响应式的。

代码示例:

<template><div class="person"><h2>一辆{{car.brand}}价值{{car.price}}</h2><button @click="changeBrand">修改汽车的品牌</button><button @click="changePrice">修改汽车的价格</button> <button @click="changeCar">修改汽车</button> <hr><h2>当前求和为:{{sum}}</h2><button @click="changeSum">点我sum+1</button></div>
</template><script setup lang="ts" name="Person">//引入 ref、reactiveimport {ref,reactive} from 'vue'//数据let car = ref({brand:'奔驰',price:100})let sum = ref(0)//方法function changePrice(){car.value.price += 10}function changeBrand(){car.value.brand = '宝马'}function changeCar(){// 对于 reactive 来说// car = {brand:'奥拓',price:1}  //这样修改不了// car = reactive({brand:'奥拓',price:1}) //这样也是修改不了的。// 只有这种写法,才能响应式的修改 car 对象中的内容// Object.assign(obj1,obj2,obj3)// 把 obj2、obj3 中的每一组key-value组合都加在 obj1,obj1原先的内容会被覆盖// Object.assign(car,{brand:'奥拓',price:1}) //reactive的写法// 如果用的是 ref 可以直接修改car.value = {brand:'奥拓',price:1} // ref 带 .value 必然是响应式的。}function changeSum(){sum.value += 1// sum = ref(9)  //这样是不行的}</script><style scoped>.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button{margin: 0 5px;}
</style>

refreactive 的使用建议

  1. 若需要一个基本类型的响应式数据,必须使用ref
  2. 若需要一个响应式对象,层级不深,refreactive都可以。
  3. 若需要一个响应式对象,且层级较深,推荐使用reactive

五、toRefs与toRef

toRefs()、toRef(),就是把一个响应式对象给解构出来,并且解构出来的数据也具备响应式。

代码示例:

<template><div class="person"><h2>姓名:{{name}}</h2><h2>年龄:{{age}},{{nl}}</h2><button @click="changeName">修改姓名</button><button @click="changeAge">修改年龄</button></div>
</template><script setup lang="ts" name="Person">import {reactive,toRefs,toRef} from 'vue'//数据let person = reactive({name:'张三',age:18 })//toRefs 的作用: 就是 把一个reactive定义的对象 变成 一个ref定义的对象//toRefs(person):此时的 name 和 age 就是响应式的了。let {name,age} = toRefs(person)// let {name,age} = person 相当于以下代码// let name = person.name// let age = person.age// 此时自定义的 name、age 不是响应式的 而 person.name、person.age 这两个是响应式//toRef// 第一个参数是响应式对象,第二个参数是变量名let nl = toRef(person,'age')console.log(nl) //nl 也是一个 响应式 数据// 方法function changeName(){name.value += '~'//自定义 name 里面的值 和 person.name里面的值都会发生改变console.log(name.value,person.name)}function changeAge(){age.value += 1console.log(age)}</script><style scoped>.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button{margin: 0 5px;}
</style>

power by 尚硅谷

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

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

相关文章

leetcode100169 求两个集合的交集

Problem: https://leetcode.cn/problems/maximum-squar100169 e-area-by-removing-fences-from-a-field/description/ [TOC] 思路 遍历所有的横向栏杆与纵向栏杆&#xff0c;算出横向栏杆之间的差和纵向栏杆之间的差并存储两个集合&#xff0c;最终的答案就是两个集合的交集的…

【web】vue 播放后端(flask)发送的 mp3 文件

文章目录 演示后端&#xff08;flask&#xff09;前端&#xff08;vue3&#xff09;重要说明 演示 后端&#xff08;flask&#xff09; 后端返回的是 mp3 文件的 url&#xff0c;是可以直接在浏览器上打开后播放的处理跨域请求pip install flask-cors后端代码from flask impor…

解决 GSYVideoPlayer 连续切换视频 出现黑屏只有声音没有画面的问题

问题描述 如果这个播放器用来recycleView中&#xff0c;实现类似抖音的效果&#xff0c;会发现刷了一段时间&#xff0c;会出现只有声音没有画面的情况。这个时候是因为surface没有创建&#xff08;具体原因未知&#xff09;。GSYTextureView中的onSurfaceTextureAvailable方法…

Python - 数据结构与算法之 排列与组合

目录 一.引言 二.排列 A-Permute ◆ 定义 ◆ 计算 ◆ 性质 ◆ 实现 三.组合 C-Combine ◆ 定义 ◆ 计算 ◆ 性质 ◆ 实现 四.经典算法题目 1.全排列 [无重复] 2.全排列 [有重复] 3.组合 [可重复] 4.子集 [无重复] 5.子集 [有重复] 五.总结 一.引言 关于排列…

云原生十二问

一、什么是云原生&#xff1f; 云原生是在云计算环境中构建、部署和管理现代应用程序的软件方法。现代企业希望构建高度可扩展、灵活且具有弹性的应用程序&#xff0c;可以快速更新以满足客户需求。为此&#xff0c;他们使用现代工具和技术&#xff0c;这些工具和技术本质上支…

科普帖:什么是XaaS-一切皆服务模型(包含10个示例类别)

有时似乎有太多的商业首字母缩写词要记住。随着快速变化的技术进步和云计算的出现&#xff0c;新的类别将不断涌现。XaaS 就是这样一个最新的补充。 该领域的大多数读者都知道SaaS&#xff08;软件即服务&#xff09;、IaaS&#xff08;基础设施即服务&#xff09;和PaaS&…

【CISSP学习笔记】5. 安全架构和工程

该知识领域涉及如下考点&#xff0c;具体内容分布于如下各个子章节&#xff1a; 使用安全设计原理来研究、实施与管理工程过程理解安全模型的基本概念&#xff08;例如 Biba、Star Model、Bell-LaPadula 等模型&#xff09;基于系统安全要求选择控制措施理解信息系统 (IS) 的安…

强大的隐藏应用 Hides 5中文 for mac

Hides 5是一款Mac上的应用程序&#xff0c;旨在帮助用户隐藏其他应用程序并专注于当前任务&#xff0c;从而提高工作效率。其主要功能包括对焦模式、隐藏所有打开的应用程序、隐藏除当前活动应用之外的所有打开的应用程序、支持全局热键、可定制性、支持多种显示方式等。 Hide…

【map】【滑动窗口】【优先队列】LeetCode480滑动窗口中位数

作者推荐 动态规划 多源路径 字典树 LeetCode2977:转换字符串的最小成本 本文涉及的基础知识点 C算法&#xff1a;滑动窗口总结 map 优先队列 题目 中位数是有序序列最中间的那个数。如果序列的长度是偶数&#xff0c;则没有最中间的数&#xff1b;此时中位数是最中间的两…

注意力机制(attention mechanism)

1、注意力 灵长类动物的视觉系统接收了大量的感官输入&#xff0c;这些感官输入远远超出了大脑能够完全处理的能力。然而&#xff0c;并非所有刺激的影响都是同等的。意识的汇聚和专注使灵长类动物能够在复杂的视觉环境中将注意力引向感兴趣的物体&#xff0c;例如猎物和天敌。…

【XR806开发板试用】FreeRTOS创建任务测试

这篇来学习下&#xff0c;XR806开发板在FreeRTOS系统下创建两个任务测试&#xff0c;由于没有找到学习的文档&#xff0c;试着参考例程来测试。 一、复制工程 上篇测试了hello_demo的测试例程&#xff0c;直接复制这个工程文件&#xff0c;在此基础上修改 rootubuntu:/home/…

列表赋值,添加元素,删除元素,修改元素值

# append&#xff1a;附加&#xff0c;在列表中加入一个值 # remove(v)&#xff1a;移除&#xff0c;在列表中删除原来的列表中存在的一个值 # 如果要删除原来的列表中不存在的一个值则会报错 &#xff0c;例如&#xff1a; # ctrl / 可以多行注释 # 列表索引&#xff1a; p…

HarmonyOS官网案例解析——保存应用数据

介绍 本篇Codelab将介绍如何使用基础组件Slider&#xff0c;通过拖动滑块调节应用内字体大小。要求完成以下功能&#xff1a; 实现两个页面的UX&#xff1a;主页面和字体大小调节页面。拖动滑块改变字体大小系数&#xff0c;列表页和调节页面字体大小同步变化。往右拖动滑块字体…

Linux安装consul的两种方式(在线和离线)

目录 &#x1f4da;第一章 前言&#x1f4d7;背景&#x1f4d7;软件概述 &#x1f4da;第二章 部署&#x1f4d7;在线部署&#x1f4d5;需要root权限&#x1f4d5;执行安装命令&#x1f4d5;启动consul服务&#x1f4d5;验证consul服务 &#x1f4d7;离线部署&#x1f4d5;下载…

[原创][R语言]股票分析实战[7]:时间转换 与 股票涨幅计算

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ联系: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、D…

Ef Core花里胡哨系列(1) SafeDelete、ReadOnly、Audit 安全删除、只读、审计等

Ef Core花里胡哨系列(1) SafeDelete、ReadOnly、Audit 安全删除、只读、审计等 在软件设计中&#xff0c;软删除是一种常见的数据管理技术&#xff0c;用于标记和隐藏被删除的数据&#xff0c;而不是永久地从数据库中删除它们。软删除通常通过在数据表中添加一个额外的标志列&…

Server Send Event(基于Http协议的单向消息通信)

简介 Server-Sent Events&#xff08;SSE&#xff09;是一种简单的技术&#xff0c;允许服务器向客户端推送实时更新。在Spring Boot项目中&#xff0c;我们可以使用SseEmitter类来实现SSE功能。本文将详细介绍如何在Spring Boot项目中使用SSE&#xff0c;并给出一个使用示例。…

(九)上市企业实施IPD成功案例分享之——欧普

LED通用照明应用是LED照明应用市场的第一驱动力&#xff0c;由于LED照明技术发展迅速&#xff0c;以及成本快速下降&#xff0c;已成为全球主流照明光源。近年来&#xff0c;通过将智能控制模块嵌入LED通用照明终端&#xff0c;形成了具有自动控制、系统化控制等功能的智能照明…

听GPT 讲Rust源代码--library/panic_unwind

File: rust/library/panic_unwind/src/seh.rs 在Rust源代码中&#xff0c;rust/library/panic_unwind/src/seh.rs这个文件的作用是实现Windows操作系统上的SEH&#xff08;Structured Exception Handling&#xff09;异常处理机制。 SEH是Windows上的一种异常处理机制&#xff…

【Webpack】加载其他型模块

非模块化文件 非模块化文件指的是并不遵循任何一种模块标准的文件。 最常见的就是在 script标签引用jQuey及其各种插件 如何使用 Webpack打包这类文件呢? 其实只要直接引人即可&#xff0c;如: import ./jquery.min.js;但假如我们引人的非模块化文件是以隐式全局变量声明的方…