简记Vue3(二)—— computed、watch、watchEffect

个人简介

👀个人主页: 前端杂货铺
🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展
📃个人状态: 研发工程师,现效力于中国工业软件事业
🚀人生格言: 积跬步至千里,积小流成江海
🥇推荐学习:🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

文章目录

    • 前言
    • computed
    • watch
      • 监听 ref 定义的基本类型数据。
      • 监听 ref 定义的对象类型数据
      • 监听 reactive 定义的对象类型数据
      • 监听 ref 或 reactive 定义的对象类型数据的某个属性
      • 监视多个属性
      • watchEffect

前言

重拾 Vue3,查缺补漏、巩固基础。

computed

计算属性只读、可修改(getter setter)。

<template><div class="person"><input type="text" v-model="firstName" /><br /><input type="text" v-model="lastName" /><br />{{ fullName }} <br /><button @click="changeName">changeName(computed)</button></div>
</template><script lang="ts" setup>
import { ref, computed } from "vue";
const firstName = ref("zhang");
const lastName = ref("san");// 只读计算属性
// const fullName = computed(() => {
//   return (
//     firstName.value.slice(0, 1).toUpperCase() +
//     firstName.value.slice(1) +
//     "-" +
//     lastName.value
//   );
// });// getter setter
const fullName = computed({get() {return (firstName.value.slice(0, 1).toUpperCase() +firstName.value.slice(1) +"-" +lastName.value);},set(val) {const [str1, str2] = val.split("-");firstName.value = str1;lastName.value = str2;},
});function changeName() {fullName.value = "li-si";
}
</script><style scoped>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
</style>

在这里插入图片描述

在这里插入图片描述


watch

Vue3 中的 watch 只能监视以下四种数据:

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

监听 ref 定义的基本类型数据。

<template><div class="person">{{ sum }} <br /><button @click="changeSum">changeSum</button></div>
</template><script lang="ts" setup>
import { ref, watch } from "vue";
const sum = ref(0);function changeSum() {sum.value += 1;
}// sum 值大于 5 时停止监视
const stopWatch = watch(sum, (newValue, oldVallue) => {console.log(newValue, oldVallue);if (newValue > 5) {stopWatch();}
});
</script><style scoped>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
</style>

在这里插入图片描述


监听 ref 定义的对象类型数据

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

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

<template><div class="person">{{ person.name }} <br />{{ person.age }} <br /><button @click="changeName">changName</button><button @click="changePerson">changePerson</button></div>
</template><script lang="ts" setup>
import { ref, watch } from "vue";
const person = ref({name: "zhangsan",age: 10,
});function changeName() {person.value.name = "lisi";
}function changePerson() {person.value = { name: "wangwu", age: 20 };
}// 深度监听 person
watch(person, (newValue, oldValue) => {console.log(newValue, oldValue);},{ deep: true ));
</script><style scoped>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
</style>

在这里插入图片描述


监听 reactive 定义的对象类型数据

监视 reactive 定义的对象类型数据时,默认开启深度监视,且无法取消。

<template><div class="person">{{ person.name }} <br />{{ person.age }} <br /><button @click="changeName">changName</button><button @click="changePerson">changePerson</button></div>
</template><script lang="ts" setup>
import { reactive, watch } from "vue";
const person = reactive({name: "zhangsan",age: 10,
});function changeName() {person.name = "lisi";
}function changePerson() {Object.assign(person, { name: "wangwu", age: 20 });
}watch(person, (newValue, oldValue) => {console.log(newValue, oldValue);
});
</script><style scoped>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
</style>

在这里插入图片描述


监听 ref 或 reactive 定义的对象类型数据的某个属性

  • 若该属性值不是对象类型。需要写成函数形式
  • 若该属性值是对象类型。可以直接 . 出来,也可以写成函数(推荐)

监视的要是对象里的属性,最好写成函数式。

注意点:若监视的是地址值,需要关注对象内部,需要手动开启深度监听。

<template><div class="person">{{ person.name }} : {{ person.age }}{{ person.car.c1 }}{{ person.car.c2 }}<button @click="changeName">changeName</button><button @click="changeC1">changeC1</button><button @click="changeC2">changeC2</button><button @click="changeCar">changeCar</button></div>
</template><script lang="ts" setup>import { reactive, watch } from 'vue'const person = reactive({name: '张三',age: 20,car: {c1: '大众',c2: '小米'}})function changeName() {person.name = '李四';}function changeC1() {person.car.c1 = '奥迪';}function changeC2() {person.car.c2 = '宝马';}function changeCar() {person.car = {c1: "雅迪", c2: "爱玛"};}watch(() => person.name, (newValue, oldValue) => {console.log('name changed', newValue, oldValue);})watch(() => person.car, (newValue, oldValue) => {console.log(newValue, oldValue);}, { deep: true})
</script><style scoped>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
</style>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


监视多个属性

使用数组包裹的形式,实现同时监听多个属性。

<template><div class="person">{{ person.name }} : {{ person.age }}{{ person.car.c1 }}{{ person.car.c2 }}<button @click="changeName">changeName</button><button @click="changeC1">changeC1</button><button @click="changeC2">changeC2</button><button @click="changeCar">changeCar</button></div>
</template><script lang="ts" setup>import { reactive, watch } from 'vue'const person = reactive({name: '张三',age: 20,car: {c1: '大众',c2: '小米'}})function changeName() {person.name = '李四';}function changeC1() {person.car.c1 = '奥迪';}function changeC2() {person.car.c2 = '宝马';}function changeCar() {person.car = {c1: "雅迪", c2: "爱玛"};}watch([() => person.name, () => person.car.c1], (newValue, oldValue) => {console.log('name or car changed', newValue, oldValue);})
</script><style scoped>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
</style>

在这里插入图片描述

在这里插入图片描述


watchEffect

watchEffect 会立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行。

<template><div class="person"><h2>当前求和为:{{ sum }}</h2><button @click="changeNum">changeNum</button></div>
</template><script lang="ts" setup>import { ref, watchEffect } from 'vue'const sum = ref(0);function changeNum() {sum.value += 1;}watchEffect(() => {if (sum.value < 5) {console.log('num changed', sum.value)}})
</script><style scoped>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
</style>

在这里插入图片描述


参考资料:
https://www.bilibili.com/video/BV1Za4y1r7KE?spm_id_from=333.788.player.switch&vd_source=f839085517d2b7548b2939bfe214d466&p=23


在这里插入图片描述


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

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

相关文章

C++的汉诺塔

汉诺塔(Tower of Hanoi)是一个经典的递归问题。问题的描述如下: 有三根杆(通常称为 A、B、C),以及一系列大小不同、穿在一根杆上的圆盘。这些圆盘可以滑动到任何一根杆上,但是每次只能移动一个圆盘,且不能将较大的圆盘放在较小的圆盘上。目标是将所有圆盘从杆 A 移动到…

Android Gradle

#1024程序员节&#xff5c;征文# Gradle 是一款强大的自动化构建工具&#xff0c;广泛应用于 Android 应用开发。它通过灵活的配置和丰富的插件系统&#xff0c;为项目构建提供了极大的便利。本文只是简单的介绍 Gradle 在 Android 开发中的使用&#xff0c;包括其核心概念、构…

Go 语言基础教程:7.Switch 语句

在这篇教程中&#xff0c;我们将学习 Go 语言中的 switch 语句&#xff0c;它是条件分支的重要结构。我们将通过一个示例程序逐步解析 switch 的不同用法。 package mainimport ("fmt""time" )func main() {i : 2fmt.Print("Write ", i, " …

拖拽盖章处理

进行元素拖拽&#xff1a;同类章替换、删除已盖章 1.复制对应元素&#xff0c;在onmousemove中left和top一直在变化 2.onmouseup时&#xff0c;计算出在pdf显示区域内的left&#xff0c;top&#xff0c;removeChild删除原先复制的元素&#xff0c;再appendChild到pdf显示区域的…

高翔【自动驾驶与机器人中的SLAM技术】学习笔记(十二)拓展图优化库g2o(一)框架

【转载】理解图优化&#xff0c;一步步带你看懂g2o框架 文章来源&#xff1a;理解图优化&#xff0c;一步步带你看懂g2o框架 小白&#xff1a;师兄师兄&#xff0c;最近我在看SLAM的优化算法&#xff0c;有种方法叫“图优化”&#xff0c;以前学习算法的时候还有一个优化方法…

机器翻译技术:AI 如何跨越语言障碍

大家好&#xff0c;我是Shelly&#xff0c;一个专注于输出AI工具和科技前沿内容的AI应用教练&#xff0c;体验过300款以上的AI应用工具。关注科技及大模型领域对社会的影响10年。关注我一起驾驭AI工具&#xff0c;拥抱AI时代的到来。 AI工具集1&#xff1a;大厂AI工具【共23款…

装饰器模式的适用场景示例

1. 动态扩展和撤销类的功能 假设我们有一个 ApiRequest 类&#xff0c;用于发送 HTTP 请求。在某些场景下&#xff0c;我们希望对传输的数据进行加密以提高安全性&#xff0c;但在其他场景下不需要加密。通过装饰器模式&#xff0c;可以轻松地在需要时动态扩展这个功能&#x…

【建造&机械】木材运输车辆检测系统源码&数据集全套:改进yolo11-GhostHGNetV2

改进yolo11-SPPF-LSKA等200全套创新点大全&#xff1a;木材运输车辆检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.28 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片…

C++与现代开发实践第三节:多线程与并发编程

第四章&#xff1a;C与现代开发实践 第三节&#xff1a;多线程与并发编程 在这一课中&#xff0c;我们将详细探讨多线程与并发编程的各个方面&#xff0c;特别是从线程的创建、管理到高级的优化技术&#xff0c;并且通过复杂的实战案例来展示如何应对并发问题。最后&#xff…

python实现放烟花效果庆祝元旦

马上就要2025年元旦啦&#xff0c;提前祝大家新年快乐 完整代码下载地址&#xff1a;https://download.csdn.net/download/ture_mydream/89926458

Prompt提示词设计:如何让你的AI对话更智能?

Prompt设计&#xff1a;如何让你的AI对话更智能&#xff1f; 在人工智能的世界里&#xff0c;Prompt&#xff08;提示词&#xff09;就像是一把钥匙&#xff0c;能够解锁AI的潜力&#xff0c;让它更好地理解和响应你的需求。今天&#xff0c;我们就来聊聊如何通过精心设计的Pr…

使用 Spring Doc 为 Spring REST API 生成 OpenAPI 3.0 文档

Spring Boot 3 整合 springdoc-openapi 概述 springdoc-openapi 是一个用于自动生成 OpenAPI 3.0 文档的库&#xff0c;它支持与 Spring Boot 无缝集成。通过这个库&#xff0c;你可以轻松地生成和展示 RESTful API 的文档&#xff0c;并且可以使用 Swagger UI 或 ReDoc 进行…

数据仓库建设 : 主题域简介

在数据仓库建设中&#xff0c;主题域&#xff08;Subject Area&#xff09;是根据业务需求和数据特点划分的数据区域&#xff0c;每个主题域代表一个特定的业务领域或功能模块。 主题域是数据模型的一个重要概念&#xff0c;它帮助构建逻辑清晰、层次分明的数据结构。主题域的设…

在数据库访问中,使用localhost、127.0.0.1和IP地址有什么差异

在数据库访问中&#xff0c;使用127.0.0.1和IP地址&#xff08;在本地环境中通常指的是局域网IP或环回地址&#xff09;的速度差异&#xff0c;实际上是非常微小的&#xff0c;甚至在很多情况下可以忽略不计。不过&#xff0c;为了更深入地理解这个问题&#xff0c;我们可以从以…

用python将pdf转成图片转换成对应的word文件

*科管系统**报告只能上传word&#xff0c;但是有些盖章文件只有pdf版本&#xff0c;因此有这个需求&#xff0c;目前市面上没这软件&#xff0c;只能自己python写一个。 要将PDF中的页面以图片的形式存储到Word文档中&#xff0c;你需要完成以下几个步骤&#xff1a; 从PDF中…

Java虚拟机的历程(jvm01)

Java虚拟机的历程&#xff08;jvm01&#xff09; Java虚拟机&#xff08;JVM&#xff09;作为Java语言的核心技术之一&#xff0c;自诞生以来经历了多次迭代与演变。不同的虚拟机在性能、功能以及适用场景上各有侧重。本文将介绍Java虚拟机发展历程中的一些重要虚拟机&#xf…

【设计模式】Liskov替换原则

文章目录 LSP原则的定义关键点示例遵循LSP原则的示例示例2结论 Liskov替换原则&#xff08;Liskov Substitution Principle&#xff0c;简称LSP&#xff09;是面向对象设计中的五大基本原则之一&#xff0c;由Barbara Liskov在1987年提出。LSP原则的核心思想是&#xff1a; 子…

部署RocketMQ, 其实很简单 (带图, 附启动命令)

目录 一 下载 RocketMQ 二 上传解压 2.1 文件上传 2.2 文件解压 三 配置RocketMQ 3.1 修改runserver.sh 3.2 修改runbroker.sh 3.3 配置环境变量 四 启动RocketMQ 4.1 启动namesrv服务 4.2 启动broker 服务 五 关闭RocketMQ 一 下载 RocketMQ 官网下载…

双十一有哪些值得入手的好物?盘点五款优惠又好用的好物推荐!

一眨眼&#xff0c;2024年双十一已经到来。自古以来&#xff0c;双十一不仅是购物狂欢的节日&#xff0c;更是消费者们尽情享受优惠和好物的绝佳时机。在这个热潮中&#xff0c;很多人都会提前准备好购物清单&#xff0c;寻觅心仪的商品。为了帮助大家在这个购物节中不空手而归…

11106 操作(c)

经验值&#xff1a;2000 时间限制&#xff1a;1000毫秒 内存限制&#xff1a;512MB 安徽省2024年信息学竞赛试题(初中组) 不许抄袭&#xff0c;一旦发现&#xff0c;直接清空经验&#xff01; 题目描述 Description 小可可有一个长度为 nn 的初始都为 00 的数组和从左到右…