vue3中组合式api的常用方法

vue3中组合式api的常用方法

记录一下vue3中常用的组合式api，包括计算属性computed、监听器watch及watchEffective

一、computed

作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。

<template><div class="person">姓：<input type="text" v-model="firstName"> <br>名：<input type="text" v-model="lastName"> <br>全名：<span>{{fullName}}</span> <br><button @click="changeFullName">全名改为：li-si</button></div>
</template><script setup lang="ts" name="App">import {ref,computed} from 'vue'let firstName = ref('zhang')let lastName = ref('san')// 计算属性——只读取，不修改/* let fullName = computed(()=>{return firstName.value + '-' + lastName.value}) */// 计算属性——既读取又修改let fullName = computed({// 读取get(){return firstName.value + '-' + lastName.value},// 修改set(val){console.log('有人修改了fullName',val)firstName.value = val.split('-')[0]lastName.value = val.split('-')[1]}})function changeFullName(){fullName.value = 'li-si'} 
</script>

二、watch

  • 作用：监视数据的变化（和Vue2中的watch作用一致）
  • 特点：Vue3中的watch只能监视以下四种数据：
  1. ref定义的数据。
  2. reactive定义的数据。
  3. 函数返回一个值（getter函数）。
  4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候，通常会遇到以下几种情况：

* 情况一（常用）

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

<template><div class="person"><h1>情况一：监视【ref】定义的【基本类型】数据</h1><h2>当前求和为：{{sum}}</h2><button @click="changeSum">点我sum+1</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'// 数据let sum = ref(0)// 方法function changeSum(){sum.value += 1}// 监视，情况一：监视【ref】定义的【基本类型】数据const stopWatch = watch(sum,(newValue,oldValue)=>{console.log('sum变化了',newValue,oldValue)if(newValue >= 10){stopWatch()}})
</script>

* 情况二

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：

  • 若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。

  • 若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

<template><div class="person"><h1>情况二：监视【ref】定义的【对象类型】数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changePerson">修改整个人</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'// 数据let person = ref({name:'张三',age:18})// 方法function changeName(){person.value.name += '~'}function changeAge(){person.value.age += 1}function changePerson(){person.value = {name:'李四',age:90}}/* 监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视watch的第一个参数是：被监视的数据watch的第二个参数是：监视的回调watch的第三个参数是：配置对象（deep、immediate等等.....） */watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)},{deep:true})</script>

* 情况三

监视reactive定义的【对象类型】数据，且默认开启了深度监视。

<template><div class="person"><h1>情况三：监视【reactive】定义的【对象类型】数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changePerson">修改整个人</button><hr><h2>测试：{{obj.a.b.c}}</h2><button @click="test">修改obj.a.b.c</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18})let obj = reactive({a:{b:{c:666}}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changePerson(){Object.assign(person,{name:'李四',age:80})}function test(){obj.a.b.c = 888}// 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)})watch(obj,(newValue,oldValue)=>{console.log('Obj变化了',newValue,oldValue)})
</script>

* 情况四（常用）

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

  1. 若该属性值不是【对象类型】，需要写成函数形式。
  2. 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

<template><div class="person"><h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改第一台车</button><button @click="changeC2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changeC1(){person.car.c1 = '奥迪'}function changeC2(){person.car.c2 = '大众'}function changeCar(){person.car = {c1:'雅迪',c2:'爱玛'}}// 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式/* watch(()=> person.name,(newValue,oldValue)=>{console.log('person.name变化了',newValue,oldValue)}) */// 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数watch(()=>person.car,(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})
</script>

* 情况五

监视上述的多个数据

<template><div class="person"><h1>情况五：监视上述的多个数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改第一台车</button><button @click="changeC2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changeC1(){person.car.c1 = '奥迪'}function changeC2(){person.car.c2 = '大众'}function changeCar(){person.car = {c1:'雅迪',c2:'爱玛'}}// 监视，情况五：监视上述的多个数据watch([()=>person.name,person.car],(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})</script>

三、watchEffect

  • 官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

  • watch对比watchEffect

    1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同

    2. watch：要明确指出监视的数据

    3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

  • 示例代码：

    <template><div class="person"><h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1><h2 id="demo">水温：{{temp}}</h2><h2>水位：{{height}}</h2><button @click="changePrice">水温+1</button><button @click="changeSum">水位+10</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch,watchEffect} from 'vue'// 数据let temp = ref(0)let height = ref(0)// 方法function changePrice(){temp.value += 10}function changeSum(){height.value += 1}// 用watch实现，需要明确的指出要监视：temp、heightwatch([temp,height],(value)=>{// 从value中获取最新的temp值、height值const [newTemp,newHeight] = value// 室温达到50℃，或水位达到20cm，立刻联系服务器if(newTemp >= 50 || newHeight >= 20){console.log('联系服务器')}})// 用watchEffect实现，不用const stopWtach = watchEffect(()=>{// 室温达到50℃，或水位达到20cm，立刻联系服务器if(temp.value >= 50 || height.value >= 20){console.log(document.getElementById('demo')?.innerText)console.log('联系服务器')}// 水温达到100，或水位达到50，取消监视if(temp.value === 100 || height.value === 50){console.log('清理了')stopWtach()}})
</script>

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

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

相关文章

【linux学习笔记】网络

【linux学习笔记】网络

目录 【linux学习笔记】网络检查、监测网络ping-向网络主机发送特殊数据包traceroute-跟踪网络数据包的传输路径netstat-检查网络设置及相关统计数据 通过网络传输文件ftp 【linux学习笔记】网络 检查、监测网络 ping-向网络主机发送特殊数据包 最基本的网络连接命令就是pin…
阅读更多...
去不了哈尔滨？ 来看这里VR全景线上云体验

去不了哈尔滨？ 来看这里VR全景线上云体验

如果你无法亲自前往哈尔滨&#xff0c;那么不要失望&#xff0c;因为现在有一种全新的方式让你在家就能领略到哈尔滨的美丽景色。 冰城客户端、哈尔滨新闻网承办的“激情迎亚冬 冰雪暖世界——2024年哈尔滨冰雪乐园” 运用720云VR打造的沉浸式体验产品正式上线&#xff0c;将带…
阅读更多...
高效工作法：占位图片生成工具助力项目快速迭代

高效工作法：占位图片生成工具助力项目快速迭代

在现代设计和开发项目中&#xff0c;图片资源的重要性不言而喻。然而&#xff0c;项目中经常会遇到寻找合适图片、调整图片尺寸和格式等问题&#xff0c;这些问题不仅耗时耗力&#xff0c;还可能影响到项目的进度和质量。此时&#xff0c;占位图片生成工具应运而生&#xff0c;…
阅读更多...
运筹说 第98期｜无约束极值问题

运筹说 第98期｜无约束极值问题

上一期我们一起学习了关于非线性规划问题的一维搜索方法的相关内容&#xff0c;本期小编将带大家学习非线性规划的无约束极值问题。 下面&#xff0c;让我们从实际问题出发&#xff0c;学习无约束极值问题吧&#xff01; 一、问题描述及求解原理 1 无约束极值问题的定义 无约…
阅读更多...
瑞_Java开发手册_（一）编程规约

瑞_Java开发手册_（一）编程规约

文章目录 编程规约的意义&#xff08;一&#xff09;命名风格&#xff08;二&#xff09;常量定义&#xff08;三&#xff09;代码格式&#xff08;四&#xff09;OOP 规约&#xff08;五&#xff09;日期时间&#xff08;六&#xff09;集合处理&#xff08;七&#xff09;并发…
阅读更多...
『 C++ 』AVL树详解 ( 万字 )

『 C++ 』AVL树详解 ( 万字 )

&#x1f988;STL容器类型 在STL的容器中,分为几种容器: 序列式容器&#xff08;Sequence Containers&#xff09;: 这些容器以线性顺序存储元素&#xff0c;保留了元素的插入顺序。 支持随机访问&#xff0c;因此可以使用索引或迭代器快速访问任何位置的元素。 主要的序列式…
阅读更多...
ES6前端学习笔记

ES6前端学习笔记

修正 ES6是ECMA为JavaScript制定的第6个标准版本&#xff0c;相关历史可查看此章节《ES6-ECMAScript6简介》。 标准委员会最终决定&#xff0c;标准在每年6月正式发布并作为当年的正式版本&#xff0c;接下来的时间里就在此版本的基础上进行改动&#xff0c;直到下一年6月草案…
阅读更多...
在微服务架构中认证和授权的那些事儿

在微服务架构中认证和授权的那些事儿

在微服务架构中认证和授权是最基础的服务能力&#xff0c;其中这一块行业类的标准就是OAuth2 和 SSO &#xff0c;而OAuth2 和 SSO 可以归类为“用户管理和身份验证”工具&#xff0c;OpenID Connect 1.0是 OAuth 2.0 协议之上的一个简单身份层。 Part.1 认识OAuth 2.0 OAuth…
阅读更多...
【数据结构】C语言实现共享栈

【数据结构】C语言实现共享栈

共享栈的C语言实现 导言一、共享栈1.1 共享栈的初始化1.2 共享栈的判空1.3 共享栈的入栈1.3.1 空指针1.3.2 满栈1.3.3 入栈空间错误1.3.4 正常入栈1.3.5 小结 1.4 共享栈的查找1.5 共享栈的出栈1.6 共享栈的销毁 二、共享栈的实现演示结语 导言 大家好&#xff0c;很高兴又和大…
阅读更多...
领域驱动设计——DDD领域驱动设计进阶

领域驱动设计——DDD领域驱动设计进阶

摘要 进阶篇主要讲解领域事件、DDD 分层架构、几种常见的微服务架构模型以及中台设计思想等内容。如何通过领域事件实现微服务解耦&#xff1f;、怎样进行微服务分层设计&#xff1f;、如何实现层与层之间的服务协作&#xff1f;、通过几种微服务架构模型的对比分析&#xff0…
阅读更多...
基于Java (spring-boot)的社团管理系统

基于Java (spring-boot)的社团管理系统

一、项目介绍 系统管理员的功能概述&#xff1a; ①用户管理 a.注册用户账户 当一个新用户注册时&#xff0c;用户填写基本信息并上传。用户基本信息包括账号、 姓名、密码、手机、地址等信息。 b.用户信息管理 管理员可以查看系统所有用户的基本信息&#xff0c;并修改和…
阅读更多...
【征服redis2】redis的事务与lua

【征服redis2】redis的事务与lua

1.redis事务介绍 在前面我们介绍了redis的几种典型数据结构和应用&#xff0c;本文我们来看一下redis的事务问题。事务也是数据库的重要主题&#xff0c;熟悉关系型数据库的读者应该对事务比较了解&#xff0c;简单地说&#xff0c;事务表示一组动作&#xff0c;要么全部执行&…
阅读更多...
基于Springboot的善筹网(众筹网-有报告)。Javaee项目，springboot项目。

基于Springboot的善筹网(众筹网-有报告)。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的善筹网(众筹网-有报告)。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring S…
阅读更多...
2024年全网最全春招时间线

2024年全网最全春招时间线

2024年全网最全春招时间线 春招&#xff0c;许多同学可能会误以为这是春天才会进行。 你可能会想&#xff0c;期末刚考完试&#xff0c;先享受下寒假&#xff0c;再欢度春节&#xff0c;收些红包&#xff0c;甚至还能抽空去理个发型。等到春日明媚时&#xff0c;再参加春招活…
阅读更多...
【数据结构】归并排序的非递归写法和计数排序

【数据结构】归并排序的非递归写法和计数排序

前言 &#x1f493;作者简介&#xff1a; 加油&#xff0c;旭杏&#xff0c;目前大二&#xff0c;正在学习C&#xff0c;数据结构等&#x1f440; &#x1f493;作者主页&#xff1a;加油&#xff0c;旭杏的主页&#x1f440; ⏩本文收录在&#xff1a;再识C进阶的专栏&#x1…
阅读更多...
表单验证 ---- 在Vue2中使用ElementUI进行表单验证

表单验证 ---- 在Vue2中使用ElementUI进行表单验证

目录 前言 给表单绑定对应属性 在data中定义数据对象和表单的定义规则 与数据对象双向绑定 对整个表单进行验证 前言 在做项目时&#xff0c;对于表单进行验证是我们必不可少的 例如 搭建一个基本的登录界面 <div class"form"><h1>登录</h1>&…
阅读更多...
电商物流查询：未来的发展方向

电商物流查询：未来的发展方向

在电商日益繁荣的时代&#xff0c;物流信息查询不仅关乎消费者体验&#xff0c;更影响着电商运营的效率。快速、准确地追踪物流信息至关重要。本文将简述物流信息快速追踪的价值&#xff0c;并重点介绍固乔快递查询助手这一高效查询工具及其批量查询功能。 一、物流信息快速追踪…
阅读更多...
一、docker的安装与踩坑

一、docker的安装与踩坑

目录 一、安装docker&#xff08;centos7安装docker&#xff09;1.安装环境前期准备2.参考官网安装前准备3.参考官网安装步骤开始安装docker4.运行首个容器 二、安装一些软件的踩坑1.启动docker踩坑2.安装mysql踩坑3.罕见问题 三、关于我的虚拟机 一、安装docker&#xff08;ce…
阅读更多...
鸿蒙开发（三）理解UIAbility

鸿蒙开发（三）理解UIAbility

前文提到过&#xff0c;在使用DevEco创建鸿蒙项目的时候&#xff0c;会选择Empty Ability&#xff0c;那么这个Ability是什么呢&#xff1f;其实对比Android Studio创建Android羡慕时选择的Empty Activity&#xff0c;感觉Harmony的Ability更像是Android的Activity&#xff0c;…
阅读更多...
持久双向通信网络协议-WebSocket-入门案例实现demo

持久双向通信网络协议-WebSocket-入门案例实现demo

1 介绍 WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c; 并进行双向数据传输。 HTTP协议和WebSocket协议对比&#xff1a; HTTP是短连接&#xff0…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023