Vue3---基础5(computed和watch、watchEffect)

computed 计算属性

        代码示例

<template><div class="person"><div>姓:<input type="text" v-model="firstName"></div><div>名:<input type="text" v-model="lastName"></div><button @click="hChangeName">修改名字</button><div>全名:{{ fullName }}</div></div>
</template><script lang="ts">
// 引入
import { ref, computed } from 'vue';
</script><script lang="ts" setup>
// 定义的数据
let firstName = ref('张')
let lastName = ref('杰')// 此为 只读 的计算属性
// let fullName = computed(() => {
//     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
// })// 此为 可读可写 的计算属性
let fullName = computed({get(){return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value},set(val){// console.log('val', val);const [str1, str2] = val.split('-')firstName.value = str1lastName.value = str2}
})function hChangeName(){fullName.value = 'Jason-Zhang'
}
</script>

watch 监听

        作用:监视数据的变化( 和Vue2中的watch作用一致 )

        特点:Vue3 中的 watch 只能监视一下四种数据        

        1. ref 定义的数据

        2. reactive 定义的数据

        3. 函数返回一个值(getter函数)

        4. 一个包含上述内容的数组

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

情况一  ref定义的基本类型

        监视 ref 定义的 基本类型数据:直接写数据名即可,监视的是其 value 值的改变

<template><div class="person"><h1>情况一:监视【ref】定义的【基本类型】数据</h1><h2>当前求和为: {{ sum }}</h2><button @click="hChangeSum">+1</button></div>
</template><script lang="ts" setup name="text2">import { ref,watch} from 'vue';// 数据let sum = ref(0)// 方法function hChangeSum(){sum.value += 1}// 监视 情况一:监视【ref】定义的【基本类型】数据// watch(监视对象, 回调函数)const stopWatch = watch(sum, (newVal, oldVal) => {console.log("sum值变化",newVal, oldVal);// 在特定情况下停止监视if(newVal >= 10) {stopWatch()}})
</script>

情况二  ref定义的对象类型

        监视 ref 定义的 对象类型 数据:直接写数据名,监视的是对象的 地址值,若想监视对象内部的数据,要手动开启深度监听

注意:

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

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

<template><div class="person"><h1>情况二:监视【ref】定义的【对象类型】数据</h1><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><button @click="hChangeName">修改名字</button><button @click="hChangeAge">修改年龄</button><button @click="hChangePerson">修改整个人</button></div>
</template><script lang="ts" setup name="text2">import { ref,watch} from 'vue';//          二// 数据let person = ref({name:'张杰',age:22,})// 方法function hChangeName(){person.value.name += '~'}function hChangeAge(){person.value.age += 1}function hChangePerson(){person.value = {name: 'Jason', age: 27}}/* 监视 情况二-1:监视【ref】定义的【基本类型】数据,想监视对象内部属性的变化,需要手动开启(深度监听)watch的第一个参数是:被监视的对象watch的第二个参数是:监视的回调watch的第三个参数是:配置对象(deep 深度监听, immediate 立即监听,等等)*/watch(person, (newVal, oldVal) =>{console.log("person值变化",newVal, oldVal);},{deep:true, immediate:true})</script>

情况三  reactive定义的对象类型

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

<template><div class="person"><h1>情况三:监视【ref】定义的【对象类型】数据</h1><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><button @click="hChangeName">修改名字</button><button @click="hChangeAge">修改年龄</button><button @click="hChangePerson">修改整个人</button></div>
</template><script lang="ts" setup name="text2">import { reactive,watch} from 'vue';//          三// 数据let person = reactive({name:'张杰',age:22,})// 方法function hChangeName(){person.name += '~'}function hChangeAge(){person.age += 1}function hChangePerson(){Object.assign(person, {name:'Jason Zhang', age: 27})}// 监视 情况三:监视【ref】定义的【对象类型】数据 默认开启深度监听// 可以通过 deep:false 去关闭watch(person, (newVal, oldVal) =>{console.log("person值变化",newVal, oldVal);})</script>

情况四   ref或reactive定义的对象类型中某个属性

        监视 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="hChangeName">修改名字</button><button @click="hChangeAge">修改年龄</button><button @click="hChangeCar1">修改第一台车</button><button @click="hChangeCar2">修改第二台车</button><button @click="hChangeAllCar">修改整个车</button></div>
</template><script lang="ts" setup name="text2">import { reactive,watch} from 'vue';//          四// 数据let person = reactive({name:'张杰',age:22,car:{c1:'小米su7',c2:'保时捷',}})// 方法function hChangeName(){person.name += '~'}function hChangeAge(){person.age += 1}function hChangeCar1(){person.car.c1 = '小米SU35'}function hChangeCar2(){person.car.c2 = '劳斯莱斯'}function hChangeAllCar(){person.car = {c1: '问界M7', c2: '问界M9', }}// 监视 情况四:监视【ref】或【reactive】定义的【对象类型】数据中的某个属性,要写成函数式watch(()=>person.name, (newVal, oldVal) =>{console.log("person.name值变化",newVal, oldVal);})/* 如果直接写,整体car的改变无法监听到如果写成函数式,无法检测对象内的变化此时加上 deep:true 就可以都检测到*/watch(()=>person.car, (newVal, oldVal) =>{console.log("person.name值变化",newVal, oldVal);},{deep:true})</script>

情况五  监视上述多个数据

// 监视 情况五:监视上述多个数据
watch([()=>person.name,()=>person.car.c1], (newVal, oldVal) =>{console.log("person.name值变化",newVal, oldVal);
})

watchEffect  监听

        官网:立即运行一个函数,同时响应式的追踪其依赖,并在依赖更改时重新执行该函数

watch 对比 watchEffect

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

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

        3. watchEffect:不用明确指出监视的数据(函数中用到哪些属性,就监视哪些属性)

<template><div class="person"><h2>当水温达到60度时,或水位到达80cm时,给服务器发请求</h2><h2>当前水温:{{ temp }}℃</h2><h2>当前水位:{{ height }}cm</h2><button @click="hChangeTemp">水温+10</button><button @click="hChangeHeight">水位+10</button></div>
</template><script lang="ts" setup name="text2">import { ref,watch, watchEffect} from 'vue';// 数据let temp = ref(10)let height = ref(5)// 方法function hChangeTemp(){temp.value += 10}function hChangeHeight(){height.value += 10}// 监视 ------ watch 实现// watch([temp,height], (value) =>{//     // 从value 中获取最新的水温和水位//     let [newTemp, newheight] = value//     // 逻辑//     if(newTemp >=60 || newheight >= 80) {//         console.log('发请求');//     }// })// 监视 ------ watchEffect 实现watchEffect(() => {// 逻辑if(temp.value >=60 || height.value >= 80) {console.log('发请求');}})</script>

 

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

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

相关文章

Python的国际化和本地化【第162篇—国际化和本地化】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 随着全球化的发展&#xff0c;多语言支持在软件开发中变得越来越重要。Python作为一种流行的…

Spark产生小文件的原因及解决方案

一、小文件的定义 Hadoop集群中的文件都是以块&#xff08;Block&#xff09;的形式存储在分布式文件系统&#xff08;HDFS&#xff09;中的&#xff0c;而Block的默认大小设置随着Hadoop的版本迭代经历了64MB、128MB、256MB&#xff0c;其大小实际受制于磁盘/网络的传输速率。…

EasyRecovery数据恢复软件2024百度云网盘下载链接

EasyRecovery数据恢复软件是一款功能强大的数据恢复工具&#xff0c;它能够帮助用户从各种存储设备中恢复丢失或误删除的文件数据。无论是由于意外删除、格式化、病毒攻击还是其他原因导致的数据丢失&#xff0c;EasyRecovery都能提供有效的解决方案。 该软件支持多种存储介质…

Java全栈开发前端+后端(全栈工程师进阶之路)【介绍】

Java全栈开发前端后端&#xff08;全栈工程师进阶之路&#xff09; 本次课程&#xff0c;从0到1讲解全栈开发 前端到后端&#xff0c;解决您的开发难题 课程如下&#xff1a; 第1阶段-课程介绍与环境搭建 前置课程&#xff1a; 1、HTML 2、JavaScript 3、CSS 4、Java基…

Redis实现延迟任务的几种方案

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1.前言 2.Redis如何实现延迟任务&#xff1f; 3.代码实现 3.1. 过期键通知事…

针对MaxCompute优化案例分享

声明 原文来源&#xff1a;微信公众号&#xff1a;阿里云开发者 前言 MaxCompute 是阿里巴巴集团推出的一种大数据计算平台&#xff0c;用于处理海量数据和进行数据分析。它提供了高可靠性、高扩展性和高性能的数据处理能力&#xff0c;支持 SQL 查询、MapReduce 计算和机器…

初识ansible服务剧本playbook及剧本编写实例

目录 1、playbook剧本文件概念 1.1 剧本文件的结构由4部分组成 2、配置实例 实例1-编写一个实现批量安装mariadb数据库的剧本 实例2-编写一个创建一个目录/backup,并在目录喜爱创建01.txt文件的剧本 实例3-编写一个添加定时同步时间的定时任务剧本 错误反思 1、playbook剧…

element UI 日期选择器 当前年份之前不可选

<el-date-pickertype"year"format"YYYY"value-format"YYYY"v-model"declareYear"placeholder"请选择年份":disabled-date"disabledDateFun"/>function disabledDateFun(time) {if (time.getFullYear() <…

趣话最大割问题:花果山之群猴博弈

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 编辑丨浪味仙 排版丨 沛贤 深度好文&#xff1a;3000字丨15分钟阅读 趋利避害&#xff0c;是所有生物遵循的自然法则&#xff0c;人类也不例外。 举个例子&#xff0c;假如你是某生鲜平台的配…

游戏方舟服务器怎么选择?

选择游戏方舟服务器是一个需要仔细考虑的过程&#xff0c;因为服务器的质量和稳定性将直接影响到你的游戏体验。以下是一些建议&#xff0c;帮助你选择适合的游戏方舟服务器。 1、考虑服务器的地理位置 选择一个地理位置靠近你的服务器&#xff0c;可以减少延迟和网络问题。你可…

论文速读:Do Generated Data Always Help Contrastive Learning?

在对比学习领域&#xff0c;最近很多研究利用高质量生成模型来提升对比学习 给定一个未标记的数据集&#xff0c;在其上训练一个生成模型来生成大量的合成样本&#xff0c;然后在真实数据和生成数据的组合上执行对比学习这种使用生成数据的最简单方式被称为“数据膨胀”这与数据…

【C++核心-基础知识】内存分析和new操作符

内存分析和new操作符 一、内存分析1. 程序运行前就存在的区域1.1 代码区1.2 全局区1.3 代码演示 2. 程序运行后才存在的区域2.1 栈区2.2 堆区 二、new操作符1. 基本介绍2. 代码演示 一、内存分析 C程序在执行时&#xff0c;将内存大方向划分为4个区域&#xff1a; 代码区&…

CountDownLatch

CountDownLatch 翻译&#xff1a; 倒计时锁存器&#xff0c;&#xff0c;&#xff0c;&#xff0c;count计数&#xff0c;down停止&#xff0c;Latch锁 解释&#xff1a; 允许一个或多个线程等待&#xff0c;直到在其他线程中执行的一组操作完成的同步辅助不懂&#xff1f;…

破译验证码reCAPTCHA 之 打码平台

由于登录需要验证码&#xff0c;除了日常的字符串&#xff0b;数字&#xff0c;此时就需要用第三方插件进行破译。 reCaptcha是Google公司的验证码服务&#xff0c;方便快捷&#xff0c;改变了传统验证码需要输入n位失真字符的特点。 1. reCAPTCHA 初识 reCaptcha是Google公司…

Linux超级基础命令

1&#xff09;、cd&#xff1a;改变目录。 2&#xff09;、cd.&#xff0e;回退到上一个目录&#xff0c;直接cd进入默认目录 3&#xff09;、pwd&#xff1a;显示当前所在的目录路径。 4&#xff09;、ls&#xff08;lI&#xff09;&#xff1a;都是列出当前目录中的所有文…

Nginx讲解 很详细了!!!

hello&#xff0c;你好鸭&#xff0c;我是Ethan&#xff0c;很高兴你能来阅读&#xff0c;昵称是希望自己能不断精进&#xff0c;向着优秀程序员前行!&#x1f4aa;&#x1f4aa;&#x1f4aa; 目前博客主要更新Java系列、数据库、项目案例、计算机基础等知识点。感谢你的阅读和…

pnpm 使用 workspace 报错 ERR_INVALID_THIS

有时候真的感觉如果有一个老师指路&#xff0c;那么遇到的坑真的会少很多。 错误示例&#xff1a; GET https://registry.npmjs.org/rollup%2Fplugin-typescript error (ERR_INVALID_THIS). Will retry in 10 seconds. 2 retries left.原因是什么&#xff1f;原因就是 pnpm 的…

结合文本的目标检测:Open-GroundingDino训练自己的数据集

1、简单介绍 Open-GroundingDino是GroundingDino的第三方实现训练流程的代码&#xff0c;因为官方GroundingDino没有提供训练代码&#xff0c;只提供了demo推理代码。 关于GroundingDino的介绍可以看论文&#xff1a;https://arxiv.org/pdf/2303.05499.pdf GroundingDino的G…

亚信安慧AntDB的多维度支持

在AntDB数据库中&#xff0c;其卓越的创新能力得以充分体现&#xff0c;其独特之处在于融合统一与实时处理这两大关键领域。AntDB以其独特的技术和理念&#xff0c;引领着数据库领域的发展潮流&#xff0c;成为众多企业和机构首选的数据库解决方案。在这个信息化时代&#xff0…

WInForm —— 自定义画板

项目模板:要实现在背景和无背景上完成画线&#xff0c;画直线、矩形、椭圆、并能随意调整字体的大小 首先要定义绘制的类型 enum DrawMode {None, // 没有选择绘制型Pen, // 画笔 画直线Line,// 画直线Rectangle,// 画矩形Ellipse, // 画椭圆Rubber // 橡皮擦 } //如果要想…