【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定义的对象中的属性,newValueoldValue 都是新值,因为它们是同一个对象。

  • 若修改整个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/bicheng/42966.shtml

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

相关文章

C语言 输出10行杨辉三角形

输出以下的杨辉三角形(要求输出10行)。 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 … #include <stdio.h>int main() {int triangle[10][10] {0};for (int i 0; i < 10; i) {triangle[i][0] 1;triangle[i][i] 1;for (int j 1; j < i…

<PLC><汇川><串口485>汇川Eazy521系列PLC与特域水冷机进行485通讯的设置

前言 本系列是关于PLC相关的博文,包括PLC编程、PLC与上位机通讯、PLC与下位驱动、仪器仪表等通讯、PLC指令解析等相关内容。 PLC品牌包括但不限于西门子、三菱等国外品牌,汇川、信捷等国内品牌。 除了PLC为主要内容外,PLC相关元器件如触摸屏(HMI)、交换机等工控产品,如…

【前端界面分享】

实现效果&#xff1a;html源码来自b站up主&#xff1a;【CSSJS】甲方&#xff1a;啊&#xff1f;没叫你做那么超前啊_哔哩哔哩_bilibili 本人仅实现了将html格式改为vue3 html版&#xff1a; 对于前端连入门可能都没摸到&#xff0c;学了半天也就改成vue3了&#xff0c;对于输…

杂项——循迹模块调节方法

1-4 路灰度传感器的调节方法&#xff1a; 调节时探头应对着颜色较浅的上方&#xff08;如果是黑白线赛道则应该将探头 对着白色上方调&#xff09;&#xff0c;轻轻的将全部可调电阻顺时针拧到底&#xff0c;再逆时针 慢慢回旋&#xff0c;直到对应探头的信号指示灯亮起后&…

C# 开发Winform DataGridView的增删改查实战

在C# WinForms应用程序中&#xff0c;DataGridView控件是一个非常强大的工具&#xff0c;用于显示和编辑表格数据。下面我将详细介绍如何在WinForm应用程序中使用DataGridView实现基本的数据库操作&#xff1a;增加、删除、修改和查询&#xff08;CRUD&#xff09;。 第一步&a…

【ARM系列】1 of N SPI

1 of N模式 SPI 概述配置流程 概述 GIC-600AE支持1 of N模式SPI。在此模式下可以将SPI target到多个core&#xff0c;并且GIC-600AE可以选择哪些内核接收SPI。 GIC-600AE只向处于powered up 并且使能中断组的core发送SPI。 GIC-600AE会优先考虑那些被认为是active的核&#xf…

小程序 全局数据共享 getApp()

在小程序中&#xff0c;可以通过 getApp() 方法获取到小程序全局唯一的App实例 因此在App() 方法中添加全局共享的数据、方法&#xff0c;从而实现页面、组件的数据传值 在 app.js 文件中定义 App({// 全局共享的数据globalData:{token:},// 全局共享的方法setToken(token){//…

如何创建一个基本的Mojolicious Web应用:探索Perl的现代Web框架

如何创建一个基本的Mojolicious Web应用&#xff1a;探索Perl的现代Web框架 Mojolicious是一个用Perl编写的简单、优雅的Web开发框架&#xff0c;它提供了一套丰富的工具和方法&#xff0c;让开发者能够快速构建高性能的Web应用。本文将详细介绍如何创建一个基本的Mojolicious…

面向对象——继承、封装、多态

什么是面向对象&#xff1f; 面向对象&#xff08;Object-Oriented Programming&#xff0c;简称OOP&#xff09;是一种编程范式&#xff0c;它使用“对象”来设计应用程序和计算机程序。OOP的核心概念包括类&#xff08;Class&#xff09;、对象&#xff08;Object&#xff09…

SQL注入基础入门

文章目录 前言SQL注入基本操作SQL注入类型分类数字型字符型搜索型xx型Json型数据类型提交的方式 SQL注入的位置分类报错注入报错注入实战案例 SQL注入语句分类insert注入update注入delete注入 编码Tips&#xff1a;Mysql版本区别information_schema数据库详解 其他注入手段宽字…

面试官:Java线程可以无限创建吗?

1. 面试连环call Java线程可以无限创建吗? Java线程和操作系统线程有什么关联? 操作系统为什么要区分内核态和用户态? ⏩要想解答这些问题&#xff0c;我们要先从操作系统线程开始说起&#xff0c;让我们开始吧&#x1f389;&#x1f389;&#x1f389; 2. 操作系统线程…

为什么要学习Go

本文旨在探讨为什么Go语言值得学习,以及它如何能够提升您的编程技能和职业发展。我们将深入分析Go语言的核心优势,包括其简洁的语法、强大的并发支持、卓越的性能表现,以及在云计算、微服务和系统编程等领域的广泛应用 GO logo的核心理念&#xff0c;即简单胜于复杂。使用现代…

Redis-Redis可视化工具Redis Insight下载及安装

下载 1、博主已经上传资源&#xff0c;点此下载 2、点此进入官方下载 2.1 点击Installing Redis Insight 2.2 点击Install on desktop 2.3 选择Install on desktop&#xff0c;点击Redis Insight is available for download for free from this web site从网站下载 2.4 下载…

大模型简介

文章目录 大模型简介什么是大模型GPT大语言模型发展大语言模型对话产品大模型怎么用 大模型简介 什么是大模型 大模型&#xff0c;全称「大语言模型」&#xff0c;英文「Large Language Model」&#xff0c;缩写「LLM」。是具有大量参数和复杂结构的机器学习模型。大模型通常…

Python 可视化 web 神器:streamlit、Gradio、dash、nicegui;低代码 Python Web 框架:PyWebIO

官网&#xff1a;https://streamlit.io/ github&#xff1a;https://github.com/streamlit/streamlit API 参考&#xff1a;https://docs.streamlit.io/library/api-reference 最全 Streamlit 教程&#xff1a;https://juejin.cn/column/7265946243196436520 Streamlit-中文文档…

MYSQL 四、mysql进阶 7(性能分析工具的使用)

一、数据库服务器的优化步骤 数据库调优流程图: 整个流程划分成了 观察&#xff08;Show status&#xff09; 和 行动&#xff08;Action&#xff09; 两个部分。字母 S 的部分代表观察&#xff08;会使 用相应的分析工具&#xff09;&#xff0c;字母 A 代表的部分是行…

算法012:将x减到0的最小操作数

将x减到0的最小操作数. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/minimum-operations-to-reduce-x-to-zero/ 这个题使用到的是滑动窗口。 乍一看&#xff0c…

U盘管理软件有哪些?3款好用的软件亲测有效!

在数字化办公与数据交换日益频繁的今天&#xff0c;U盘作为便携的存储设备&#xff0c;其重要性不言而喻。 然而&#xff0c;U盘的使用也带来了数据泄露、病毒感染等安全隐患。为了有效管理U盘&#xff0c;确保数据安全与合规性&#xff0c;市场上涌现出了众多U盘管理软件。 小…

大话C语言:第29篇 指针

1 指针概念 指针&#xff1a;地址的变量化形式&#xff0c;其存储的是内存中某个存储单元的地址。它是地址的数值表示。 指针变量&#xff1a;一种特殊的变量&#xff0c;它专门用于存放变量的地址&#xff08;即指针&#xff09;。 注意&#xff0c;指针和指针变量的区别&am…

【Linux】线程池|单例模式|STL、智能指针线程安全|读者写者问题

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;理解【Linux】线程池|单例模式|STL、智能指针线程安全|读者写者问题。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会…