Vue-响应式数据

news2024/11/25 15:52:12

一、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包裹的东西，必须要加上 .value
    import {ref} from 'vue' 

    //数据
    let name = ref('张三') // 注意ref是函数
    let age = ref(18) 
    let tel = 13888888888
    let address = '河北 . 邯郸'
    console.log(1,name)
    console.log(2,age)

    //方法
    function changeName(){
        name.value = 'zhang-san' 
        console.log(1,name.value)
    } 
    function changeAge(){
        age.value += 1
        console.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">
    //引入reactive
    import {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">
    //引入 ref
    import {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、reactive
    import {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>

ref 和 reactive 的使用建议

  1. 若需要一个基本类型的响应式数据，必须使用ref。
  2. 若需要一个响应式对象，层级不深，ref、reactive都可以。
  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 += 1
        console.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.coloradmin.cn/o/1350055.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Python进行批量字符替换的3种方法

Python进行批量字符替换的3种方法

一、问题的提出 之前&#xff0c;我写过一篇如何在word中计算数学算式&#xff1a; 如何用Python批量计算Word中的算式-CSDN博客 为了计算算式&#xff0c;就需要对算式进行格式化&#xff0c;把不规则的算式转换成规则的算式&#xff0c;这时就会涉及到一些字符的批量替换。…
阅读更多...
Spring见解 1

Spring见解 1

1.Spring概述 1.1.Spring介绍 ​ Spring是轻量级Java EE应用开源框架&#xff08;官网&#xff1a; http://spring.io/ &#xff09;&#xff0c;它由Rod Johnson创为了解决企业级编程开发的复杂性而创建 1.2.简化应用开发体现在哪些方面&#xff1f; IOC 解决传统Web开发中…
阅读更多...
uni-app App.vue生命周期全局样式全局存储globalData

uni-app App.vue生命周期全局样式全局存储globalData

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…
阅读更多...
小企业是否应该采用SD-WAN组网？

小企业是否应该采用SD-WAN组网？

在当今数字化时代&#xff0c;企业成功的关键之一是建立稳定高效的网络连接。无论企业规模大小如何&#xff0c;网络都是实现高效运营和达成业务目标的重要组成部分。对于小企业而言&#xff0c;考虑成本效益和资源管理显得尤为重要。那么&#xff0c;对于小企业来说&#xff0…
阅读更多...
Rust赋值语句和数字类型

Rust赋值语句和数字类型

赋值语句 在Rust中&#xff0c;使用let关键字定义变量。格式是let 变量名:变量类型 变量值;&#xff0c;下边是个例子&#xff1a; let age:i32 18;这就是定义一个有符号32位的数字变量age&#xff0c;而其中的值是18。 而在C语言定义变量的语句格式是类型 变量名 变量值。…
阅读更多...
2023年“中银杯”安徽省网络安全B模块（部分解析）

2023年“中银杯”安徽省网络安全B模块（部分解析）

前言 以下是2023年中银杯安徽省网络安全B模块题目&#xff0c;镜像可以私聊我 B模块安全事件响应/网络安全数据取证/应用安全&#xff08;400 分&#xff09; B-1&#xff1a;CMS网站渗透测试 任务环境说明&#xff1a; √服务器场景&#xff1a;Server2206&#xff08;关…
阅读更多...
详解动态顺序表

详解动态顺序表

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…
阅读更多...
SIC产业链简述

SIC产业链简述

同第一代硅半导体产业链类似&#xff0c;SiC产业链也分为以下几个环节&#xff1a; 设备和材料环节&#xff0c;包括晶体生长炉、MOCVD、切割设备、碳粉/硅粉/SiC粉体、石墨件等耗材&#xff1b; SiC衬底合外延环节&#xff0c;包括导SiC晶体生长、衬底晶片、外延片等制造&am…
阅读更多...
[嵌入式专栏](FOC - 单电阻,双电阻,三电阻采样原理)

[嵌入式专栏](FOC - 单电阻,双电阻,三电阻采样原理)

文章目录 1 . 前言2 . 三电阻方案2.1 电路接法2.2 采样原理2.3 采样注意事项 3 . 双电阻方案3.1 电路接法3.2 采样原理3.3 采样注意事项 4 . 单电阻方案4.1 电路接法4.2 采样原理4.3 采样注意事项4.4 采样时机4.5 开关管状态-电流方向 5 . 运放接法6 . AD采样周期7 . 小结 【极…
阅读更多...
Dryad数据库学习

Dryad数据库学习

从一篇science论文中看到数据存储在了这个平台&#xff0c;这里分享一下&#xff1a;datadryad.org 亲测无需注册&#xff0c;可以直接下载&#xff0c;从一个数据测试看&#xff0c;数据存储在亚马逊云&#xff0c;下载速度还可以&#xff0c;6M/s的样子。 Dryad 是一个开放的…
阅读更多...
Kioptrix-5

Kioptrix-5

环境搭建 将原来的网络适配器删除掉&#xff0c;重新配置一个即可&#xff01; 靶场下载地址&#xff1a;Kioptrix: 2014 (#5) ~ VulnHub 信息收集 nmap -sn 192.168.1.0/24 -oN live.port 发现存活主机为192.168.1.159&#xff0c;探测开放的端口信息&#xff1a; # nmap…
阅读更多...
2024年最火爆的前端技术：虚拟DOM让页面性能飞升！

2024年最火爆的前端技术：虚拟DOM让页面性能飞升！

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 前言 正文 &#x1f4d8; 一、什么是虚拟D…
阅读更多...
KBDNO1.DLL文件缺失，软件或游戏无法启动运行，怎样快速修复

KBDNO1.DLL文件缺失，软件或游戏无法启动运行，怎样快速修复

不少小伙伴&#xff0c;求助电脑报错“KBDNO1.DLL文件缺失&#xff0c;软件或游戏无法启动或运行”&#xff0c;应该怎么办&#xff1f; 首先&#xff0c;我们先来了解“KBDNO1.DLL文件”是什么&#xff1f; KBDNO1.DLL是Windows操作系统中的一个动态链接库文件&#xff0c;主…
阅读更多...
Nginx解决跨域问题过程

Nginx解决跨域问题过程

学习Nginx解决跨域问题 结果 server {listen 22222;server_name localhost;location / {if ($request_method OPTIONS) {add_header Access-Control-Allow-Origin http://localhost:8080;add_header Access-Control-Allow-Headers *;add_header Access-Control-Allo…
阅读更多...
Debezium日常分享系列之：Debezium 通知

Debezium日常分享系列之：Debezium 通知

Debezium日常分享系列之&#xff1a;Debezium 通知 一、概论二、Debezium通知格式三、Debezium 有关初始快照状态的通知四、Debezium 有关增量快照进度的通知五、启用 Debezium 通知六、访问 Debezium JMX 通知七、自定义通知渠道八、应用案例 一、概论 Debezium 通知提供了一…
阅读更多...
Excel中部分sheet页隐藏并设置访问密码

Excel中部分sheet页隐藏并设置访问密码

1、新建sheet1 2、新建sheet2 3、隐藏sheet2 4、保护工作簿、输密码 5、密码二次确认 6、隐藏的sheet2已经查看不了 7、想要查看时&#xff0c;按图示输入原密码即可 8、查看sheet2内容
阅读更多...
混合编程—C++程序中python脚本的嵌入方法（理论部分）

混合编程—C++程序中python脚本的嵌入方法（理论部分）

一、C与Python高级编程语言简概 &#xff08;一&#xff09;C C是一种被广泛使用的计算机程序设计语言。它是一种通用程序设计语言&#xff0c;支持多重编程范式&#xff0c;例如过程化程序设计&#xff08;Procedural programming&#xff09;、面向对象程序设计&#xff08;…
阅读更多...
no和not的应用场景

no和not的应用场景

语法 后面直接跟名词&#xff1a;no 后面不是跟名词&#xff1a;not 案例
阅读更多...
java struts2教务管理系统Myeclipse开发mysql数据库struts2结构java编程计算机网页项目

java struts2教务管理系统Myeclipse开发mysql数据库struts2结构java编程计算机网页项目

一、源码特点 java struts2 教务管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助 struts2 框架开发&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境 为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库…
阅读更多...
深度学习｜2.11 向量化vectorization

深度学习｜2.11 向量化vectorization

2.11 向量化的作用 向量化可以使得向量中的每一个维度的数据进行并行计算&#xff0c;从而加快了神经网络的计算速度。 验证 其他
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023