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.mzph.cn/news/615777.shtml

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

相关文章

Bom 和 Dom 区别 ----- 真是DOM 和 虚拟Dom区别

Bom 和 Dom 区别 ----- 真是DOM 和 虚拟Dom区别

DOM和BOM的区别 我们都指代&#xff0c;javascript由三个部分组成&#xff1a; ECMAScript&#xff1a;描述了JS的语法和基本对象 BOM(浏览器对象)&#xff1a;与浏览器交互的方法和对象 DOM(文档对象模型)&#xff1a;处理网页内容的方法和接 ps&#xff1a;根据宿主&#x…
阅读更多...
Nerf相关研究

Nerf相关研究

1.Nerf相关研究 随着Luma AI的到来&#xff0c;再次将Nerf推向浪尖&#xff0c;实用性进一步得到强化。Nerf仍以极速的发展速度前行&#xff0c;越来越多的研究方向不断涌现。 4K-Nerf 4K-NeRF: High Fidelity Neural Radiance Fields at Ultra High Resolutions 论文&#…
阅读更多...
JVM内存模型深度剖析与优化

JVM内存模型深度剖析与优化

欢迎大家关注我的微信公众号&#xff1a; 目录 JVM整体结构及内存模型 JVM内存参数设置 JVM整体结构及内存模型 首先附一段简单代码&#xff0c;我们从代码层面来讲解内存模型 public class Math {public static final int initData 666;public static User user new …
阅读更多...
性能测试分析案例-定位DNS解析很慢

性能测试分析案例-定位DNS解析很慢

环境准备 预先安装 docker 等工具&#xff0c;如 apt install docker.io。 操作和解析 执行下面的命令&#xff0c;拉取案例中使用的 Docker 镜像&#xff1a; docker pull feisky/dnsutils运行下面的命令&#xff0c;查看主机当前配置的 DNS 服务器&#xff1a; cat /etc…
阅读更多...
你知道谁才是 “最懂程序员” 的搜索引擎？

你知道谁才是 “最懂程序员” 的搜索引擎？

大家好&#xff0c;我是奇兵&#xff0c;作为一名程序员&#xff0c;我们开发的过程中几乎每天都和搜索引擎打交道&#xff0c;利用它来搜文档、解决 Bug 等等。 而随着 AI 的发展&#xff0c;搜索引擎也变得越来越智能&#xff0c;市面上也涌现除了越来越多的 AI 搜索引擎。 …
阅读更多...
【qt】sdk写pro写法，cv，onnx，cudnn

【qt】sdk写pro写法，cv，onnx，cudnn

我的sdk在OpenCV003项目里&#xff1a; pro中添加 CONFIG(release, debug|release) {LIBS -L$$PWD/sdk/onnxruntime-x64-gpu/lib/ -lonnxruntimeLIBS -L$$PWD/sdk/onnxruntime-x64-gpu/lib/ -lonnxruntime_providers_cudaLIBS -L$$PWD/sdk/onnxruntime-x64-gpu/lib/ -lon…
阅读更多...
深入探索JavaScript中实用而高级的Rest参数和Spread语法

深入探索JavaScript中实用而高级的Rest参数和Spread语法

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 函数是JavaScript这个语言的核心,而如何处理函数的参数是函数编程中非…
阅读更多...
深度学习工具-Amazon SageMaker使用

深度学习工具-Amazon SageMaker使用

Amazon SageMaker 深度学习程序可能需要很多计算资源&#xff0c;这很容易超出你的本地计算机所能提供的范围。云计算服务允许你使用功能更强大的计算机更轻松地运行本书的GPU密集型代码。 注册 首先&#xff0c;我们需要在注册一个帐户https://aws.amazon.com/。 为了增加安…
阅读更多...
io.lettuce.core.RedisCommandExecutionException: NOAUTH Authentication required.

io.lettuce.core.RedisCommandExecutionException: NOAUTH Authentication required.

报错信息&#xff1a; 浏览器中的报错信息 IDEA中的报错信息 报错原因&#xff1a; SpringBoot整合Redis使用的默认配置&#xff0c;但是我们设置了Redis的密码&#xff0c;而默认配置中密码是为空的&#xff0c;导致不能够连接 浏览器中的报错信息 There was an unexpected …
阅读更多...
ChatGLM2-6B 大语言模型本地搭建

ChatGLM2-6B 大语言模型本地搭建

ChatGLM模型介绍&#xff1a; ChatGLM2-6B 是清华 NLP 团队于不久前发布的中英双语对话模型&#xff0c;它具备了强大的问答和对话功能。拥有最大32K上下文&#xff0c;并且在授权后可免费商用&#xff01; ChatGLM2-6B的6B代表了训练参数量为60亿&#xff0c;同时运用了模型…
阅读更多...
Mac/Linux虚拟机CrossOver2024新版下载使用教程

Mac/Linux虚拟机CrossOver2024新版下载使用教程

CrossOver不像Parallels或VMware的模拟器&#xff0c;而是实实在在Mac OS X系统上运行的一个软件&#xff0c;该软件可以让用户在mac是上直接运行windows软件&#xff0c;本文为大家带来的是CrossOver Mac版安装教程&#xff01; CrossOver Mac-安装包下载如下&#xff1a;http…
阅读更多...
zookerper入门

zookerper入门

zookerper介绍 ZooKeeper 是一个开源的分布式协调框架,主要用来解决分布式集群中应用系统的一致性问题. ZooKeeper本质上是一个分布式的小文件存储系统&#xff08;Zookeeper文件系统监听机制&#xff09;.提供基于类似于文件系统的目录树方式的数据存储&#xff0c;并且可以…
阅读更多...
typora导出html添加目录

typora导出html添加目录

typora导出html添加目录 使用方法 首先要从typora导出html文件&#xff0c;之后用记事本编辑器html文件 找到文档最后面&#xff0c;如图&#xff1a; 用文字编辑类工具打开sideBar.txt&#xff0c;复制其中所有内容【内容在下面】 在如上图的位置插入所复制的内容 打开修改…
阅读更多...
漏油控制器有用吗？漏油监测器多少钱一个？

漏油控制器有用吗？漏油监测器多少钱一个？

漏油控制器也可以被称作漏油监测器、漏油传感器&#xff0c;是漏油检测系统里的一部分&#xff0c;一般是和漏油检测绳组合在一起使用&#xff0c;用来检测油罐、输油管道、油类化工厂等场合是否有油料泄露。很多人刚开始可能会觉得难以置信&#xff0c;这么一个小东西就可以检…
阅读更多...
SPDK中常用的性能测试工具

SPDK中常用的性能测试工具

本文主要介绍磁盘性能评估的方法&#xff0c;针对用户态驱动Kernel与SPDK中各种IO测试工具的使用方法做出总结。其中fio是一个常用的IO测试工具&#xff0c;可以运行在Linux、Windows等多种系统之上&#xff0c;可以用来测试本地磁盘、网络存储等的性能。为了和SPDK的fio工具相…
阅读更多...
两周掌握Vue3（四）：计算属性、监听属性、事件处理

两周掌握Vue3（四）：计算属性、监听属性、事件处理

文章目录 一、计算属性1.什么是计算属性2.代码示例 二、监听属性三、事件处理 代码仓库&#xff1a;跳转 当前分支&#xff1a;04 一、计算属性 1.什么是计算属性 Vue 中的计算属性具有以下作用&#xff1a; 数据处理&#xff1a;计算属性可以用于对数据进行处理和计算&…
阅读更多...
格雷希尔G65系列快速接头满足汽车减震器的气压、油压测试要求

格雷希尔G65系列快速接头满足汽车减震器的气压、油压测试要求

当汽车经过不平路面时&#xff0c;汽车减震器可以抑制弹簧吸震后因反弹带来的震荡和来自路面的冲击&#xff0c;为乘客带来平稳舒适的行车体验。减震器在出厂之前&#xff0c;需要模拟汽车的真实行驶环境&#xff0c;在模拟当中需要对它们进行气压和油压的轮番测试。 客户的测试…
阅读更多...
ssm基于java web的防疫工作志愿者服务平台的设计与实现论文

ssm基于java web的防疫工作志愿者服务平台的设计与实现论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本防疫工作志愿者服务平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数…
阅读更多...
PHP短链接url还原成长链接

PHP短链接url还原成长链接

在开发过程中&#xff0c;碰到了需要校验用户回填的短链接是不是系统所需要的&#xff0c;于是就需要还原找出短链接所对应的长链接。 长链接转短链接 在百度上搜索程序员&#xff0c;跳转页面后的url就是一个长链接。当然你可以从任何地方复制一个长链接过来。 长链接 http…
阅读更多...
stm32---输入捕获实验实操（巨详细）

stm32---输入捕获实验实操（巨详细）

这次来分享上次没说完的输入捕获的知识点 实验中用到两个引脚&#xff0c;一个是通用定时器 TIM3 的通道 1&#xff0c;即 PA6&#xff0c;用于输出 PWM 信号&#xff0c;另一 个是高级控制定时器 TIM1 的通道 1&#xff0c;即 PA8&#xff0c;用于 PWM 输入捕获&#xff0c;实…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023