vue3中如何实现多个侦听器(watch)

<body>
<div id="app"><input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>new Vue({el: '#app',data: {food: {id: 1,name: '冰激凌'}},methods: {change() {this.food.name = '棒棒糖'}},watch: {// 第一种方式:监听整个对象,每个属性值的变化都会执行handler// 注意:属性值发生变化后,handler执行后获取的 newVal 值和 oldVal 值是一样的food: {// 每个属性值发生变化就会调用这个函数handler(newVal, oldVal) {console.log('oldVal:', oldVal)console.log('newVal:', newVal)},// 立即处理 进入页面就触发immediate: true,// 深度监听 属性的变化deep: true},// 第二种方式:监听对象的某个属性,被监听的属性值发生变化就会执行函数// 函数执行后,获取的 newVal 值和 oldVal 值不一样'food.name'(newVal, oldVal) {console.log('oldVal:', oldVal)   // 冰激凌console.log('newVal:', newVal)   // 棒棒糖}}})
</script>
</body>
  1. immediate(立即处理 进入页面就触发)
  2. deep(深度监听)

https://cn.vuejs.org/guide/essentials/watchers.html

<script setup lang = "ts">
import { ref, reactive, watch } from 'vue'const person = reactive({name: 'zhangsan',age: 18,school: {address: 'jinan'}
})const updatePerson = () => {person.name = 'lisi'person.school.address = 'beijing'
}watch([() => person.name, () => person.school.address],(newInfo: string[], oldInfo: string[]) => {console.log(newInfo) // ['lisi', 'beijing']console.log(oldInfo) // ['zhangsan', 'jinan']},{ deep: false }
)
</script><template><h3>{{ person.name }}</h3><h3>{{ person.school.address }}</h3><button @click="updatePerson">修改人员信息</button>
</template>

https://blog.csdn.net/qq_52421092/article/details/131067716

<script>
import { toRefs, watch, reactive } from 'vue'
export default {setup() {const state = reactive({money: 100,car: {rand: "宝马",}})}watch([() => state.money, () => state.car],(newVal, oldVal) => {console.log("变化了", newVal, oldVal)  // newVal新值是一个数组, 值顺序就是侦听的顺序  oldVal一样},{deep: true,immediate: false})return {...toRefs(state)}
}
</script>

在这里插入图片描述

三、watchEffect
不用指明监视哪个属性,监视的回调用到哪个属性,就去监视哪个属性

  • watch可以访问新值和旧值,watchEffect不能访问。
  • watch需要指明监听的对象,也需要指明监听的回调。
  • watchEffect不用指明监视哪一个属性,监视的回调函数中用到哪个属性,就监视哪个属性。
  • watch只有监听的值发生变化的时候才会执行,但是watchEffect不同,每次代码加载watchEffect都会执行。
    在这里插入图片描述

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

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

相关文章

透视未来工厂:山海鲸可视化打造数字孪生新篇章

在信息化浪潮的推动下&#xff0c;数字孪生工厂项目正成为工业制造领域的新宠。作为一名山海鲸可视化的资深用户&#xff0c;我深感其强大的数据可视化能力和数字孪生技术在工厂管理中的应用价值&#xff0c;同时我们公司之前也和山海鲸可视化合作制作了一个智慧工厂项目&#…

Matlab与高光谱遥感:环境监测的新时代

光谱和图像是人们观察世界的两种方式&#xff0c;高光谱遥感通过“图谱合一”的技术创新将两者结合起来&#xff0c;大大提高了人们对客观世界的认知能力&#xff0c;本来在宽波段遥感中不可探测的物质&#xff0c;在高光谱遥感中能被探测。以高光谱遥感为核心&#xff0c;构建…

三星工厂突发大火···  | 百能云芯

据韩媒报道&#xff0c;三星SDI位于韩国京畿道龙仁市基兴区的器兴工厂发生火灾。火灾发生在当地时间周四下午15:37左右&#xff0c;持续约20分钟后被扑灭。 幸运的是&#xff0c;此次火灾并未造成人员伤亡&#xff0c;但火场附近的一些帐篷已经被烧毁。消防部门目前正在调查火灾…

Windows 11 安装 WSL2

一、 概述 之前公司的服务器版本一直是ubuntu 16.04&#xff0c;然后再拉取新项目代码时编译报错找不到GLIBCXX_3.4.22 查看版本&#xff1a;strings /usr/lib/x86_64-linux-gnu/libstdc.so.6 | grep GLIBC ubuntu 16.04版本太低&#xff0c;更换20.04版本&#xff0c;所以就…

【JDBC编程】Java连接MySQL的五个步骤

目录 JDBC编程 1.JDBC的使用 2.数据库连接Connection 3.Statement对象 4.ResultSet对象 JDBC编程 JDBC编程运用了MySQL提供的 Java 的驱动包 mysql-connector-java &#xff0c;需要基于 Java 操作 MySQL 即需要该驱动包。同样的&#xff0c; 要基于 Java 操作 Oracle 数据库…

demo版多人聊天系统

目录 ​编辑 一&#xff0c;引入 二&#xff0c;在Server端修改的代码 1&#xff0c;保存用户信息功能实现 2&#xff0c;拼接消息 3&#xff0c;广播消息 三&#xff0c; Client端要修改的代码 四&#xff0c;效果演示 一&#xff0c;引入 在上一篇文章udp网络服务器中&a…

MySQL索引优化

示例 CREATE TABLE employees (id int(11) NOT NULL AUTO_INCREMENT,name varchar(24) NOT NULL DEFAULT COMMENT 姓名,age int(11) NOT NULL DEFAULT 0 COMMENT 年龄,position varchar(20) NOT NULL DEFAULT COMMENT 职位,hire_time timestamp NOT NULL DEFAULT CURRENT_TI…

PyTorch深度学习:如何提升遥感影像的地物分类精度?

我国高分辨率对地观测系统重大专项已全面启动&#xff0c;高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成&#xff0c;将成为保障国家安全的基础性和战略性资源。未来10年全球每天获取的观测数据将超过10PB&#xff0c;遥感大数据时…

【算法杂货铺】分治

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 快速排序 &#x1f4c2;75. 颜色分类 - 力扣&#xff08;LeetCode&#xff09; &#x1f4c2; 912. 排序数组 - 力扣&#xff08;LeetCode&#xff09; &#x1f4c2; 215. 数组中的第K个最大元素 - 力扣&#xff08;Lee…

突然发现!原来微信批量自动加好友这么简单!

你知道如何更好地管理和利用微信资源&#xff0c;实现客户拓展和沟通吗&#xff1f;下面就教大家一招&#xff0c;帮助大家实现统一管理多个微信号以及批量自动加好友。 想要统一管理多个微信号&#xff0c;不妨试试微信管理系统&#xff0c;不仅可以多个微信号同时登录&#…

数据分析概述、Conda环境搭建及JupyterLab的搭建

1. 数据分析职责概述 当今世界对信息技术的依赖程度在不断加深&#xff0c;每天都会有大量的数据产生&#xff0c;我们经常会感到数据越来越多&#xff0c;但是要从中发现有价值的信息却越来越难。这里所说的信息&#xff0c;可以理解为对数据集处理之后的结果&#xff0c;是从…

【Selenium(五)】

一、鼠标事件 from selenium import webdriver # 导入ActionChains类进行鼠标悬停操作 from selenium.webdriver.common.action_chains import ActionChains import time# 打开一个浏览器 # 法一、添加环境变量重启电脑 # 法二、填写浏览器驱动的绝对路径 driver webdriver.E…

vmare17 安装不可启动的iso镜像系统

由于要测试一个软件&#xff0c;要安装一个Windows11_InsiderPreview_Client_x64_zh-cn_26058.iso 于是在虚拟机里捣鼓一下。但是这个iso好像不能直接启动 这样就无法直接安装了&#xff0c;怎么办呢&#xff0c;可以先用个pe系统引导进去&#xff0c;再在PE系统里安装这个iso…

【免费】如何考取《鲸鸿动能广告初级优化师》认证(详细教程)

鲸鸿动能广告初级优化师认证考试PC网址 初级&#xff1a;鲸鸿动能广告初级优化师认证-华为开发者学堂 (huawei.com) 注&#xff1a;免费认证&#xff0c;里面包含免费的课程&#xff0c;浏览器用Edge。 文章目录 鲸鸿动能广告初级优化师认证考试网址 前言 一、备考流程 二…

软考 网络工程师 每日学习打卡 2024/3/21

学习内容 第8章 网络安全 本章主要讲解网络安全方面的基础知识和应用技术。针对考试应该掌握诸如数据加密、报文认 证、数字签名等基本理论&#xff0c;在此基础上深入理解网络安全协议的工作原理&#xff0c;并能够针对具体的 网络系统设计和实现简单的安全解决方案。 本章共有…

python云上水果超市的设计与实现flask-django-php-nodejs

伴随着我国社会的发展&#xff0c;人民生活质量日益提高。于是对云上水果超市进行规范而严格是十分有必要的&#xff0c;所以许许多多的信息管理系统应运而生。此时单靠人力应对这些事务就显得有些力不从心了。所以本论文将设计一套云上水果超市&#xff0c;帮助商家进行商品信…

如何为您的网站压缩图像

今天碰到一个客户反馈&#xff0c;他在hostease购买了虚拟主机&#xff0c;创建的WordPress站点图片比较多&#xff0c;后来访问网站&#xff0c;页面上大量的图片加载时间较长&#xff0c;咨询网站图像如何压缩。我们为用户提供网站图像压缩&#xff0c;用户很快完成了设置。在…

【Pt】新建项目时的设置

新建项目时需要在如下界面做一些设置。 一、模板与文件 模板通常选择“PBR - Metallic Roughness Alpha-blend” 文件可以选择fbx&#xff0c;abc&#xff0c;obj等格式的三维模型文件 二、项目设置 2.1 文件分辨率 指的是在软件中的预览效果&#xff0c;分辨率越高预览效果…

使用npm创建一个全局的cli命令,就像vue-cli一样

我们用过vue-cli等工具包&#xff0c;全局安装之后&#xff0c;我们可以直接使用vue create等命令&#xff0c;实际上能够这样使用的原因&#xff0c;就是使用了package.json里面的bin字段注册命令。接下来就以一个脚本文件为例子为大家演示一下bin是如何发挥作用的。 创建项目…

跳过mysql权限验证来修改密码-GPT纯享版

1.打开 MySQL 的配置文件&#xff0c;通常是 my.ini 或 my.cnf。 2.找到 [mysqld] 部分&#xff0c;如果没有则添加。 3.在 [mysqld] 部分中添加一行&#xff1a;skip-grant-tables&#xff0c;这个选项告诉 MySQL 服务器跳过权限验证&#xff0c;允许任何用户连接而不需要密码…