当前位置: 首页 > news >正文

Vue侦听器Watch

31. Vue侦听器Watch

1. 定义

WatchVue.js提供的一个观察者模式,用于监听数据的变化并执行相应的回调函数。虽然计算属性Computed在大多数情况下更合适,但有时也需要一个自定义的侦听器Watch。因为在有些情况下,我们需要在状态变化时执行一些“副作用”:例如更改 DOM,或是根据异步操作的结果去修改另一处的状态。

2. 基本用法

在Vue组件中,我们可以使用watch来监听数据的变化并执行回调函数,示例如下:

<template><div><div><label for="qu">问题: </label><input type="text" id="qu" placeholder="请输入问题" v-model="question"></div><div>{{ answer }}</div></div>
</template>
<!-- vue2 -->
<script>
import axios from "axios"
export default {data() {return {question: '',answer: "no answer"}},watch:{question(newValue, oldValue) {this.answer = "Thinking..."this.debounceGet()}},  created() {// 接收防抖获取数据函数this.debounceGet = this.debounce(this.getAnswer, 500)},  methods:{// 调用接口获取数据async getAnswer() {try{const res = await axios.get('https://yesno.wtf/api')this.answer = await res.data.answer} catch(error) {this.answer = error}},// 防抖函数控制debounce(fn, wait) {let timer = nullreturn function() {if(timer)clearTimeout(timer)timer = setTimeout(() => {fn.apply(this, arguments)}, wait);}}}
}
</script><!-- vue3 -->
<script setup>
import axios from "axios"
import { ref, watch } from "vue"const question = ref("")
const answer = ref("no answer")// 异步获取数据
const getAnswer = async() => {try{const res = await axios.get('https://yesno.wtf/api')answer.value = await res.data.answer} catch(error) {answer.value = error}
}
// 防抖函数
const debounce = (fn, wait) => {let timer = nullreturn function() {if(timer)clearTimeout(timer)timer = setTimeout(() => {fn.apply(this, arguments)}, wait);}
}
// 接收防抖获取数据函数
const debounceGet = debounce(getAnswer, 500)// 侦听器
watch(question, (newValue, oldValue) => {answer.value = "Thinking..."debounceGet()
})
</script>

3. watch高级用法

watch侦听器还有三个属性:

  • handlerwatch中需要具体执行的方法。
  • immediate:在组件初始化时立即执行hanler中代码。
  • deep:深度监听,可以监听对象或数组内部属性的变化。
<!-- vue2 -->
<script>
export default {data() {return {obj: {name: "Jack",age: 20}}},watch:{obj: {handler(newValue, oldValue){console.log("obj被改变");},immediate: true,deep: true}},methods:{setName(){this.obj.name = "Jarry"}}
}
</script>

在vue3中,直接给 watch() 传入一个响应式对象,会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发:

// vue3
const obj = reactive({name: "Jack",age: 20
})
const setName = () => {obj.name = "Bob"
}
//直接传入响应式对象,所有子孙元素改变都会侦听到,默认深度监听
watch(obj, (newValue, oldValue) => {console.log("obj被改变");
})
//传入一个getter函数,只会侦听到对应的属性的变化,默认深度监听
watch(() => obj.name, (newValue, oldValue) => {console.log("obj.name被改变");
})
// 传入deep属性,强制监听
watch(() => obj.age, (newValue, oldValue) => {console.log("obj.age被改变");
}, { deep: true })setName();//obj被改变
obj.age++

watch 默认是懒执行的:仅当数据源变化时,才会执行回调。但在某些场景中,我们希望在创建侦听器时,立即执行一遍回调。举例来说,我们想请求一些初始数据,然后在相关状态更改时重新请求数据。

我们可以通过传入 immediate: true 选项来强制侦听器的回调立即执行:

// 传入immediate, 立即执行
watch(obj, (newValue, oldValue) => {console.log("立即执行");
}, { immediate: true })

相关文章:

Vue侦听器Watch

31. Vue侦听器Watch 1. 定义 Watch是Vue.js提供的一个观察者模式&#xff0c;用于监听数据的变化并执行相应的回调函数。虽然计算属性Computed在大多数情况下更合适&#xff0c;但有时也需要一个自定义的侦听器Watch。因为在有些情况下&#xff0c;我们需要在状态变化时执行一…...

云快充研发中心平台架构师谈云原生稳定性建设之路

作者&#xff1a;吕周洋 大家好&#xff0c;我是来自云快充研发中心的平台架构师吕周洋&#xff0c;今天我给大家分享云快充云原生稳定性之路。 点击查看&#xff1a;云快充研发中心平台架构师 吕周洋&#xff1a;云快充云原生稳定性治理之路 云快充成立于2016年&#xff0c…...

ENVI IDL学习笔记之基本操作

前言ENVI IDL&#xff08;交互式数据语言&#xff09;是一个通用的科学计算包&#xff0c;它提供了一套数学函数、数据分析工具&#xff0c;以及一些科学可视化和动画工具。IDL 是 ENVI 图像处理和分析软件的基础&#xff0c;可用于编写脚本并自动执行许多使用 ENVI 图形用户界…...

多线程面试题

1. Sychronized的锁升级过程是怎样的&#xff1f; 2. Tomcat 中为什么要使用自定义类加载器&#xff1f; 3. 说说对线程安全的理解 4. 对守护线程的理解 5. 并发、并行、串行之间的区别 6. Java死锁如何避免&#xff1f; 7. 谈谈你对AQS的理解&#xff0c;AQS如何实现可重入锁&…...

YARN运行流程

YARN是Hadoop资源管理器&#xff0c;他是一个通用资源管理平台和调度平台&#xff0c;可为上层应用提供统一的资源管理和调度&#xff0c;MapReduce等运算程序则相当于运行于操作系统上的应用程序&#xff0c;YARN为这些程序提供运算所需的资源内存、cpu。 YARN并不清楚用户提…...

java八股系列——SpringMVC从接受请求到完成响应的过程

Spring的MVC框架是围绕一个DispatcherServlet来设计的&#xff0c;这个Servlet会把请求分发给各个处理器&#xff0c;并支持可配置的处理器映射、视图渲染、本地化、时区与主题渲染等&#xff0c;甚至还能支持文件上传。 流程大致如下&#xff1a; 用户发起请求&#xff1a;用…...

Elasticsearch索引全生命周期

索引(Index)是Elasticsearch中最重要的概念之一&#xff0c;也是整个Elasticsearch操作的基础&#xff0c;它是相互关联的文档的一个集合。在Elasticsearch种&#xff0c;数据存储为 JSON 文档&#xff0c;每个文档将一组键&#xff08;字段或属性的名称&#xff09;与其对应的…...

汇编指令学习(LOOP)

一、xor异或操作&#xff0c;相同为0&#xff0c;不同为1xor eax,eaxeax异或eax&#xff0c;相同为0&#xff0c;并把结果存放到eax&#xff0c;简单说该语句就是想eax寄存器清零。二、ECX&#xff0c;计数器mov ecx,0x3将ecx寄存器设置为3三、DEC减一操作dec ecxecx寄存器的值…...

Linux 配置本地yum源

挂载光盘 进入包 配置路径&#xff0c;查看在线yum源 移动在线yum源到/home/目录下 进入vi,任意取名以.repo结尾即可 按住i进行编辑&#xff0c;输入以下内容 注意gpgcheck1是检验&#xff0c;配置本地yum源不需要检验 写入上图内容按住&#xff1a;输入wq&#xff0c;点击回车…...

【PyTorch】教程:torch.nn.LeakyReLU

torch.nn.LeakyReLU 原型 CLASS torch.nn.LeakyReLU(negative_slope0.01, inplaceFalse) 参数 negative_slope (float) – 控制负值斜率&#xff0c;默认为 1e-2inplace (bool) – in-place 操作&#xff0c;默认为 False 定义 LeakyReLU(x)max⁡(0,x)negative_slope∗min⁡…...

【刷题】-- 基础 -- 二分查找

精于结构、敏于心智、熟于代码 方式&#xff1a;对于会的代码&#xff1a;学会以最快的速度构建&#xff0c;并以最快的速度书写&#xff1b;对于不会的代码&#xff1a;学会&#xff08;以最短的路径下&#xff09;看懂别人的代码。学会使用参考文档、熟悉每一个容器。 刷题位…...

Spark MLlib 特征工程

Spark MLlib 特征工程预处理特征选择归一化离散化Embedding向量计算特征工程制约了模型效果 : 决定了模型效果的上限 , 而模型调优只是在不停地逼近上限好的特征工程才能有好的模型 特征处理函数分类 : 预处理 : 将模型无法直接消费的数据&#xff0c;转为可消费的数据形式特…...

CentOS7 完全卸载 php

在 CentOS 7 使用 yum install 简单安装 php 后&#xff0c;发现 php 版本 5.4 &#xff0c;太低了&#xff01; 然后&#xff0c;使用 yum remove 简单卸载后&#xff0c;发现 php 还在&#xff0c;不干净&#xff01; 只好 rpm 慢慢卸载 rpm -qa |grep php php-gd-5.4.16-4…...

关于OCS认证里必须知晓的内容

【关于OCS认证里必须知晓的内容】美国非营利组织Textile Exchange推出的有机认证标准——有机含量标准(The Organic Content Standard)&#xff0c;简称OCS。该标准通过跟踪有机原材料的种植从而监管整个有机产业链。OCS将应用于各种有机种植原料的验证&#xff0c;而不只限于有…...

创业做电商难不难?新人做电商怎么才能挣钱?

这几年经济不景气&#xff0c;创业做电商的人越来越多&#xff0c;但是&#xff0c;对于多数人来说&#xff0c;一开始做电商&#xff0c;都是试错成本&#xff0c;没有系统学习或者是跟着半吊子二把刀学的&#xff0c;结果赔钱就算了&#xff0c;新人创业做电商到底难不难&…...

【项目设计】高并发内存池(七)[性能测试和提升]

&#x1f387;C学习历程&#xff1a;入门 博客主页&#xff1a;一起去看日落吗持续分享博主的C学习历程博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a; 也许你现在做的事情&#xff0c;暂时看不到成果&#xff0c;但不要忘记&…...

PHP:Laravel cast array json数据存数据库时unicode 编码问题和update更新不触发数据转换

目录问题描述问题解决方式一&#xff1a;自定义属性方式二&#xff1a;继承覆写方式三&#xff1a;trait复用方式四&#xff1a;定义Cast子类update不生效参考文章问题描述 Model示例 class UserModel extends Model {protected $table tb_user;protected $casts [alias …...

自动化测试总结--断言

采购对账测试业务流程中&#xff0c;其中一个测试步骤总是失败&#xff0c;原因是用例中参数写错及断言不明确 一、问题现象&#xff1a; 采购对账主流程中&#xff0c;其中一个步骤失败了&#xff0c;会导致这个套件一直失败 图&#xff08;1&#xff09;测试报告视图中&…...

传输线的物理基础(三):传输线的瞬时阻抗

每个信号都有一个上升时间 RT&#xff0c;通常是从 10% 到 90% 的电压电平测量的。当信号沿传输线向下移动时&#xff0c;前沿在传输线上展开并具有空间范围。如果我们可以冻结时间并观察电压分布向外移动时的大小&#xff0c;我们会发现类似下图的东西。传输线上上升时间的长度…...

第六章:多线程

第六章&#xff1a;多线程 6.1&#xff1a;程序、进程、线程基本概念 程序 程序program是为了完成特定任务、用某种语言编写的一组指令的集合。即指一段静态的代码&#xff0c;静态对象。 进程 ​ 进程process是程序的一次执行过程&#xff0c;或是正在运行的一个程序。是一个…...

脑波货币化:公司用我的焦虑情绪炒期货

一、软件测试工程师&#xff1a;焦虑的“完美生产者”在持续集成、敏捷交付的现代开发流程中&#xff0c;软件测试从业者长期处于多重压力夹击之下&#xff1a;精确性高压&#xff1a;对缺陷零容忍的行业标准&#xff0c;使每一次测试执行如同走钢丝技术迭代焦虑&#xff1a;AI…...

Ubuntu20.04安全重启后WiFi图标消失?MT7922网卡驱动修复全攻略

Ubuntu 20.04安全重启后MT7922网卡驱动失效的深度修复指南 问题现象与初步诊断 当你使用REISUB组合键对Ubuntu 20.04进行安全重启后&#xff0c;可能会发现桌面右上角的WiFi图标神秘消失。这不是简单的界面显示问题&#xff0c;而是MT7922无线网卡驱动未能正常加载导致的深层…...

CF1335E2 Three Blocks Palindrome (hard version)

本题解也可通过CF1335E1 Three Blocks Palindrome (easy version)。做法&#xff1a;值域很小。只有200&#xff0c;考虑从这里入手。我们设q[i][j]表示数i第j次出现的位置&#xff0c;sum[i][j]表示种类i在1到j范围内出现过多少次。枚举 a,b 具体的值&#xff0c;枚举 x&#…...

【板栗糖GIS】从KML到KMZ:GIS数据压缩、共享与ArcMap实战指南

1. KMZ与KML&#xff1a;GIS数据压缩与共享的黄金拍档 第一次接触KMZ文件时&#xff0c;我也被这个后缀名搞得一头雾水。直到有次野外测绘&#xff0c;队友发来一个带照片的谷歌地图范围文件&#xff0c;才真正体会到它的便利性。简单来说&#xff0c;KMZ就是KML的压缩版本&…...

m3u8流媒体视频下载工具的技术实现与应用指南

m3u8流媒体视频下载工具的技术实现与应用指南 m3u8流媒体视频下载工具是一款基于现代Web技术栈开发的桌面应用程序&#xff0c;专门用于处理各类在线视频资源的下载需求。该工具采用TypeScript语言开发&#xff0c;结合Electron框架构建跨平台桌面应用&#xff0c;为用户提供专…...

UML(Unified Modeling Language,统一建模语言)是一种标准化的可视化建模语言,广泛用于软件系统的需求分析

UML&#xff08;Unified Modeling Language&#xff0c;统一建模语言&#xff09;是一种标准化的可视化建模语言&#xff0c;广泛用于软件系统的需求分析、设计与文档化。你列出的是UML 2.x 中最常用的六种结构与行为图&#xff0c;分别属于两大类&#xff1a; ✅ 结构图&#…...

3步构建缠论分析平台:TradingView可视化工具全攻略

3步构建缠论分析平台&#xff1a;TradingView可视化工具全攻略 【免费下载链接】chanvis 基于TradingView本地SDK的可视化前后端代码&#xff0c;适用于缠论量化研究&#xff0c;和其他的基于几何交易的量化研究。 缠论量化 摩尔缠论 缠论可视化 TradingView TV-SDK 项目地址…...

Qwen3.5-4B-Claude-Opus基础教程:llama.cpp量化参数对精度影响实测

Qwen3.5-4B-Claude-Opus基础教程&#xff1a;llama.cpp量化参数对精度影响实测 1. 模型介绍 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B的推理蒸馏模型&#xff0c;特别强化了结构化分析、分步骤回答以及代码与逻辑类问题的处理能力。该版本以GGU…...

【笔试真题】- 小红书-2026.03.25

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围在线刷题 bishipass.com 小红书-2026.03.25 本次三题均对应历史原题,这一场按原题复用口径直接整理。 题目一:好数判断 只需要关心不同奇质因子的个数奇偶性。预处理质数后做分解即…...

基于动态三维环境下的Q-Learning算法无人机自主避障路径规划研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...