【VUE基础】VUE3第三节—核心语法之computed、watch、watcheffect

computed

接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

创建一个只读的计算属性 ref：
在这里插入图片描述

<template><div class="person">姓名：<input type="text" v-model="fistname" ><br>年龄：<input type="text" v-model="lastname" ><br>信息：<span>{{ fullname }}</span></div>
</template><script lang="ts" setup name="Person">
import { ref, computed } from 'vue'const fistname = ref('xiao')
const lastname = ref('c')const fullname = computed(()=>{return fistname.value + "_" +lastname.value
})
</script>

创建一个可写的计算属性 ref：
在这里插入图片描述

<template><div class="person">姓名：<input type="text" v-model="fistname" ><br>年龄：<input type="text" v-model="lastname" ><br>切换:<button @click="changefullname">点击切换为xiao_b</button><br>信息：<span>{{ fullname }}</span></div>
</template><script lang="ts" setup name="Person">
import { ref, computed } from 'vue'const fistname = ref('xiao')
const lastname = ref('c')const fullname = computed({get(){return fistname.value + "_" +lastname.value},set(val){fistname.value=val.split("_")[0],lastname.value=val.split("_")[1]}
})function changefullname(){fullname.value="xiao_b"
}</script>

在这里插入图片描述

watch

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

​
监测数据变化

  • 作用：监视数据的变化(和Vue2中的watch作用一致)
  • 特点：Vue3中的watch只能监视以下四种数据：

ref定义的数据。
reactive定义的数据。
函数返回一个值(getter函数)。
一个包含上述内容的数组。

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

情况一

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

<template><div><h1>情况一：监视【ref】定义的【基本类型】数据</h1><h2>当前求和为：{{ sum }}</h2><button @click="changeSum">点我sum+1</button></div>
</template>// 方法
<script setup lang="ts" name="Person">
import { ref, watch } from 'vue'
// 数据
const sum = ref(0)
// 函数
function changeSum () {sum.value += 1
}
// 监视，情况一：监视【ref】定义的【基本类型】数据
const stopWatch = watch(sum, (newVale, oldVale) => {console.log('sum变化了', newVale, oldVale)if (newVale >= 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】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视{deep:true}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定义的【对象类型】数据中的某个属性，注意点如下：

若该属性值不是【对象类型】，需要写成函数形式。
若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。
结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
在这里插入图片描述

<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="demotemp">水温：{{temp}}</h2><h2 id="demoheight">水位：{{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 += 10}// 用watch实现，需要明确的指出要监视：temp、height// watch([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){console.log(document.getElementById('demotemp')?.innerText)console.log('联系服务器')}if(height.value >= 20){console.log(document.getElementById('demoheight')?.innerText)console.log('联系服务器')}// 水温达到100，或水位达到50，取消监视if(temp.value === 100 || height.value === 50){console.log('清理了')stopWtach()}})
</script>

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

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

相关文章

3033.力扣每日一题7/5 Java

3033.力扣每日一题7/5 Java

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;算法练习关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 目录 思路 解题方法 时间复杂度 空间复杂度 Code 思路 首先创建一个与…
阅读更多...
【C++】unordered系列容器的封装

【C++】unordered系列容器的封装

你很自由 充满了无限可能 这是很棒的事 我衷心祈祷你可以相信自己 无悔地燃烧自己的人生 -- 东野圭吾 《解忧杂货店》 unordered系列的封装 1 unordered_map 和 unordered_set2 改造哈希桶2.1 模版参数2.2 加入迭代器 3 上层封装3.1 unordered_set3.2 unordered_map 4 面…
阅读更多...
基于springboot的工作绩效管理系统的设计与实现+文档

基于springboot的工作绩效管理系统的设计与实现+文档

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…
阅读更多...
XSS 攻击是什么？如何防护？

XSS 攻击是什么？如何防护？

1. 什么是 XSS 攻击 跨站脚本攻击&#xff0c;是一种很常见的网络安全威胁。 它允许攻击者在目标浏览器中注入恶意脚本代码。这些恶意脚本会执行多种非法操作。比如盗取你的 cookie&#xff0c;会话信息&#xff0c;篡改网页内容&#xff0c;重定向到别的恶意网站。控制浏览器…
阅读更多...
零基础学习MySQL---库的相关操作

零基础学习MySQL---库的相关操作

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、创建数据库 1.语法 CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specification] .…
阅读更多...
Android 简单快速实现 下弧形刻度尺（滑动事件）

Android 简单快速实现 下弧形刻度尺（滑动事件）

效果图&#xff1a; 直接上代码&#xff1a; package com.my.view;import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Pai…
阅读更多...
WordPress付费进群V2主题，多种引流方法，引私域二次变现

WordPress付费进群V2主题，多种引流方法，引私域二次变现

全新前端UI界面&#xff0c;多种前端交互特效让页面不再单调&#xff0c;进群页面群成员数&#xff0c;群成员头像名称&#xff0c;每次刷新页面随机更新不重复&#xff0c;最下面评论和点赞也是如此随机刷新不重复 进群页面简介&#xff0c;群聊名称&#xff0c;群内展示&…
阅读更多...
JavaScript中的reduce()

JavaScript中的reduce()

reduce() 方法是 JavaScript 数组&#xff08;Array&#xff09;对象的一个非常强大的方法&#xff0c;它允许你对数组中的每个元素执行一个由你提供的 reducer 函数&#xff08;升序执行&#xff09;&#xff0c;将其结果汇总为单个返回值。这个方法非常适用于累加器、数组求和…
阅读更多...
010 Volatile和本地线程

010 Volatile和本地线程

文章目录 关键字Volatile可见性&#xff1a;原子性&#xff1a;有序性&#xff1a; 本地线程如何创建ThreadLocal变量如何访问ThreadLocal变量关于InheritableThreadLocal 关键字Volatile Volatile是轻量级的synchronized,在多处理器环境下&#xff0c;可以保证共享变量的可见…
阅读更多...
蝙蝠优化算法（Bat Algorithm，BA）及其Python和MATLAB实现

蝙蝠优化算法（Bat Algorithm，BA）及其Python和MATLAB实现

蝙蝠优化算法&#xff08;Bat Algorithm&#xff0c;简称BA&#xff09;是一种基于蝙蝠群体行为的启发式优化算法&#xff0c;由Xin-She Yang于2010年提出。该算法模拟了蝙蝠捕食时在探测目标、适应环境和调整自身位置等过程中的行为&#xff0c;通过改进搜索过程来实现优化问题…
阅读更多...
UML2.0-系统架构师（二十四）

UML2.0-系统架构师（二十四）

1、&#xff08;重点&#xff09;系统&#xff08;&#xff09;在规定时间内和规定条件下能有效实现规定功能的能力。它不仅取决于规定的使用条件等因素&#xff0c;还与设计技术有关。 A可靠性 B可用性 C可测试性 D可理解性 解析&#xff1a; 可靠性&#xff1a;规定时间…
阅读更多...
ServiceImpl中的参数封装为Map到Mapper.java中查询

ServiceImpl中的参数封装为Map到Mapper.java中查询

ServiceImpl中的参数封装为Map到Mapper.java中查询&#xff0c;可以直接从map中获取到key对应的value
阅读更多...
论文阅读【时间序列】DSformer

论文阅读【时间序列】DSformer

论文阅读【时间序列】DSformer arxive: DSformer: A Double Sampling Transformer for Multivariate Time Series Long-term Prediction github: MTST 分类&#xff1a;多变量时间序列&#xff08;Multivariate time series&#xff09; 核心观点 多变量时间序列3个维度信息 …
阅读更多...
Spring Cloud Alibaba组件概览

Spring Cloud Alibaba组件概览

目录 Spring Cloud Alibaba组件概览引言一、Spring Cloud Alibaba概述二、Spring Cloud Alibaba组件概览2.1 Nacos2.1.1 概述2.1.2 特点2.1.3 应用场景2.1.4 实例分析 2.2 Sentinel2.2.1 概述2.2.2 特点2.2.3 应用场景2.2.4 实例分析 2.3 RocketMQ2.3.1 概述2.3.2 特点2.3.3 应…
阅读更多...
Android AlertDialog对话框

Android AlertDialog对话框

目录 AlertDialog对话框普通对话框单选框多选框自定义框 AlertDialog对话框 部分节选自博主编《Android应用开发项目式教程》&#xff08;机械工业出版社&#xff09;2024.6 在Android中&#xff0c;AlertDialog弹出对话框用于显示一些重要信息或者需要用户交互的内容。 弹出…
阅读更多...
【Linux进阶】磁盘分区2——MBR和GPT

【Linux进阶】磁盘分区2——MBR和GPT

1.磁盘的分区 因为如果你的磁盘被划分成两个分区&#xff0c;那么每个分区的设备文件名是什么&#xff1f; 在了解这个问题之前&#xff0c;我们先来复习一下磁盘的组成&#xff0c;因为现今磁盘的划分与它物理的组成很有关系。 我们谈过磁盘主要由碟片、机械手臂、磁头与主轴马…
阅读更多...
Go 语言 UUID 库 google/uuid 源码解析：时钟信息

Go 语言 UUID 库 google/uuid 源码解析：时钟信息

google/uuid 库地址 google/uuid 时间相关的部分汇聚在 uuid 包下的 time.go 文件中。 UUID 的 RFC 4122 变体中的版本1和版本2依赖于时钟信息&#xff0c;所以 uuid 库将时钟信息的实现定义在本文件中&#xff0c;供对应版本 UUID 的生成使用。 UUID 依赖于时钟信息的实现版…
阅读更多...
5G NR与4G LTE的技术差异

5G NR与4G LTE的技术差异

5G NR与4G LTE的技术差异 5G与4G相比&#xff0c;5G(NR)技术有以下优势点&#xff1a; 一、总体技术方面 系统消息 4G(LTE): 支持在任何条件(或情况)下始终开启所有系统消息的广播&#xff0c;导致大量资源浪费&#xff0c;且终端(UE)需要持续评估。 系统信息广播是终端(UE)…
阅读更多...
gda动态调试-cnblog

gda动态调试-cnblog

忽的发现gda有动态调试功能 动态监听返回值 框柱指定方法&#xff0c;选择调试方法&#xff0c;gda会自动监听函数的返回值&#xff0c;例如 自定义frida脚本 gda会自动生成hook该函数的frida脚本
阅读更多...
window.ai 开启你的内置AI之旅

window.ai 开启你的内置AI之旅

❝ 成功是得你所想&#xff0c;幸福是享你所得 大家好&#xff0c;我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder ❝ 此篇文章所涉及到的技术有 AI( Gemini Nano) Chrome Ollama 因为&#xff0c;行文字数所限&#xff0c;有些概念可能会一带而过亦或者提供…
阅读更多...
最新文章

Copyright @ 2022~2023