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

Vue监听器watch的基本用法

news 2026/2/3 12:55:44

文章目录

        • 1. 作用
        • 2. 格式
        • 3. 示例
          • 3.1 value 值为字符串
          • 3.2 value 值为函数
          • 3.3 value 值为对象
        • 4. 与计算属性对比

1. 作用

监视数据变化，执行一些业务逻辑或异步操作。

2. 格式

监听器 watch 内部以 key ：value 的形式定义，key 是 data 中的属性名，value 是监听到 key 变化后执行的回调函数。value 可以是字符串，可以是函数，可以是对象。

  • value 如果为字符串，字符串为方法名称，需要通过 methods 定义好；
  • value 如果为函数，通过函数可以获取到监听对象更新前和更新后的值；
  • value 如果为对象，对象内可以包含回调函数的其他选项，例如是否初始化时进行监听 immediate : true，或是否执行深度遍历 deep : true。

如 value 为函数，watch 格式为：

watch: {// 该方法会在数据变化时，触发执行// data 中属性的名称为数据属性名// : function 可以省略。数据属性名 : function (newValue, oldValue) 可简写为 数据属性名 (newValue, oldValue)数据属性名 : function (newValue, oldValue) {一些业务逻辑 或 异步操作。},// data 中对象数据的属性需要写为 对象.属性名'对象.属性名' : function (newValue, oldValue) {一些业务逻辑 或 异步操作。}
}

如 value 为对象，watch 格式为：

watch: {数据属性名 : {deep: true, // 深度监视(针对复杂类型)immediate: true, // 是否立刻执行一次handlerhandler (newValue) {console.log(newValue)}}
}
3. 示例
3.1 value 值为字符串
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}</style></head><body><div id="app"><div class="box"><div class="input-wrap"><textarea v-model="words"></textarea></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {words: ''},methods:{changewords(){console.log(this.words)}},watch: {words : 'changewords' // 注意单引号不要漏掉}})</script></body>
</html>

执行结果：
在这里插入图片描述

3.2 value 值为函数

将上面代码改写成 value 值为函数的格式：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}</style></head><body><div id="app"><div class="box"><div class="input-wrap"><textarea v-model="words"></textarea></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {words: ''},watch: {words (newvalue, oldvalue) {console.log(newvalue)}}})</script></body>
</html>

执行结果：
在这里插入图片描述

3.3 value 值为对象

将上面代码改写成 value 值为对象的格式：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}</style></head><body><div id="app"><div class="box"><div class="input-wrap"><textarea v-model="words.cat"></textarea></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {words: {cat : '奶牛猫',dog : '哈士奇',}},watch: {// '对象.属性名'的单引号不要漏掉'words.cat' : {deep : true,immediate : true,  // 立刻执行一次handlerhandler (newvalue) {console.log(newvalue)}}}})</script></body>
</html>

执行结果：
在这里插入图片描述
因为设置了 immediate : true，所以首次打开页面会打印出 “奶牛猫” 字样。

4. 与计算属性对比

计算属性的结果会缓存，只有依赖属性发生变化才会重新计算，且必须返回一个数据，主要用来进行数据计算。
监听器主要监听某个数据的变化，从而执行回调业务，不仅仅局限于返回数据，比如数据变化时执行异步发送Ajax请求或开销较大的操作时，采用监听器较好。

相关文章：

Vue监听器watch的基本用法

文章目录 1. 作用2. 格式3. 示例3.1 value 值为字符串3.2 value 值为函数3.3 value 值为对象 4. 与计算属性对比 1. 作用 监视数据变化&#xff0c;执行一些业务逻辑或异步操作。 2. 格式 监听器 watch 内部以 key &#xff1a;value 的形式定义&#xff0c;key 是 data 中的…...

编程日记 2024/4/4 13:15:59

MySQL UPDATE JOIN 根据一张表或多表来更新另一张表的数据

当使用MySQL时&#xff0c;经常需要根据一张表或多张表的数据来更新另一张表的数据。这种情况下&#xff0c;我们可以使用UPDATE语句结合JOIN操作来实现这一需求。本文将介绍MySQL中使用UPDATE JOIN的技术。 什么是UPDATE JOIN UPDATE JOIN是MySQL中一种结合UPDATE语句和JOIN…...

编程日记 2024/4/4 13:12:55

JS实现继承的方式ES6版

上一篇&#xff1a;JS实现继承的方式原生版 ES6的继承 主要是依赖extends关键字来实现继承&#xff0c;且继承的效果类似于寄生组合继承。 class Parent() { }class Child extends Parent {constructor(x, y, color) {super(x, y);this.color color;} }子类必须在construct…...

编程日记 2024/4/4 13:10:52

elementui 左侧或水平导航菜单栏与main区域联动

系列文章目录 一、elementui 导航菜单栏和Breadcrumb 面包屑关联 二、elementui 左侧导航菜单栏与main区域联动 三、elementui 中设置图片的高度并支持PC和手机自适应 四、elementui 实现一个固定位置的Pagination&#xff08;分页&#xff09;组件 文章目录 系列文章目录…...

编程日记 2024/4/4 13:06:49

YUNBEE云贝-技术分享：PostgreSQL分区表

引言 PostgreSQL作为一款高度可扩展的企业级关系型数据库管理系统&#xff0c;其内置的分区表功能在处理大规模数据场景中扮演着重要角色。本文将深入探讨PostgreSQL分区表的实现逻辑、详细实验过程&#xff0c;并辅以分区表相关的视图查询、分区表维护及优化案例&#xff0c;…...

编程日记 2024/4/4 13:04:46

5.2 通用代码，数组求和，拷贝数组，si配合di翻转数组

5.2 通用代码&#xff0c;数组求和&#xff0c;拷贝数组&#xff0c;si配合di翻转数组 1. 通用代码 通用代码类似于一个用汇编语言写程序的一个框架&#xff0c;也类似于c语言的头文件编写 assume cs:code,ds:data,ss:stack data segmentdata endsstack segmentstack endsco…...

编程日记 2024/4/4 13:01:43

Oracle23免费版简易安装攻略

installation-guide 1 安装 root用户下 wget https://yum.oracle.com/repo/OracleLinux/OL8/developer/x86_64/getPackage/oracle-database-preinstall-23c-1.0-1.el8.x86_64.rpm wget https://download.oracle.com/otn-pub/otn_software/db-free/oracle-database-free-23c-1…...

编程日记 2024/4/4 13:00:42

《论文阅读》一种基于反事实推理的会话情绪检测无训练去偏框架 EMNLP 2023

《论文阅读》一种基于反事实推理的会话情绪检测无训练去偏框架 EMNLP 2023 前言简介相关工作模型构架Basic ClassificationBias ExtractionUnbiased Inference实验结果前言 亲身阅读感受分享，细节画图解释，再也不用担心看不懂论文啦~ 无抄袭，无复制，纯手工敲击键盘~ 今天…...

编程日记 2024/4/4 12:58:40

基于springboot+vue的健身房管理预约管理系统

...

编程日记 2024/4/4 12:50:34

【编译lombok问题】已解决：编译突然找不到符号问题-get/set找不到符号

一、场景&#xff1a;编译突然找不到符号 报错信息&#xff1a; 找不到符号 符号&#xff1a;方法getName() 二、原因&#xff1a; 没有使用lombok支持的编译器 三、解决方法&#xff1a; 打开File-Settings&#xff0c;按以下步骤进行设置&#xff1b; 修改&#xff1a;-Djp…...

编程日记 2024/4/4 12:49:33

第四篇：3.3 无效流量（Invalid traffic) - IAB/MRC及《增强现实广告效果测量指南1.0》

翻译计划 第一篇概述—IAB与MRC及《增强现实广告效果测量指南》之目录、适用范围及术语第二篇广告效果测量定义和其他矩阵之- 3.1 广告印象&#xff08;AD Impression&#xff09;第三篇广告效果测量定义和其他矩阵之- 3.2 可见性 &#xff08;Viewability&#xff09;第四篇广…...

编程日记 2024/4/4 12:47:31

PyTorch示例——使用Transformer写古诗

文章目录 PyTorch示例——使用Transformer写古诗1. 前言2. 版本信息3. 导包4. 数据与预处理数据下载先看一下原始数据开始处理数据&#xff0c;过滤掉异常数据定义 词典编码器 Tokenizer定义数据集类 MyDataset测试一下MyDataset、Tokenizer、DataLoader 5. 构建模型位置编码器…...

编程日记 2024/4/4 12:45:29

vue 视频添加水印

1.需求背景 其实腾讯云点播的api也支持视频水印&#xff0c;但是只有单个水印&#xff0c;大概效果是这样子的&#xff0c;不满足我们的需求&#xff0c;我们的需求是需要视频中都是水印。 腾讯云点播水印 项目需求的水印&#xff08;主要是防录屏,最后的实现效果是这样&…...

编程日记 2024/4/4 12:37:21

Web Animations API 动画

Element.animate() dom.animate动画可以避免污染dom原有的css动画 参考资料 Element.animate() - Web API 接口参考 | MDN Element: getAnimations() method - Web APIs | MDN .tunnel{width:200px;height:200px;background-color:#38f;}<div class"tunnel" …...

编程日记 2024/4/4 12:33:17

【大数据存储】实验五：Mapreduce

实验Mapreduce实例——排序&#xff08;补充程序&#xff09; 实验环境 Linux Ubuntu 16.04 jdk-8u191-linux-x64 hadoop-3.0.0 hadoop-eclipse-plugin-2.7.3.jar eclipse-java-juno-SR2-linux-gtk-x86_64 实验内容 在电商网站上&#xff0c;当我们进入某电商页面里浏览…...

编程日记 2024/4/4 12:30:15

日志服务 HarmonyOS NEXT 日志采集最佳实践

作者&#xff1a;高玉龙&#xff08;元泊&#xff09; 背景信息 随着数字化新时代的全面展开以及 5G 与物联网&#xff08;IoT&#xff09;技术的迅速普及&#xff0c;操作系统正面临前所未有的变革需求。在这个背景下&#xff0c;华为公司自主研发的鸿蒙操作系统&#xff08…...

编程日记 2024/4/4 12:26:11

Educational Codeforces Round 133 (Rated for Div. 2) (C dp D前缀和优化倍数关系dp)

A&#xff1a;能用3肯定用三&#xff0c;然后分类讨论即可 #include<bits/stdc.h> using namespace std; const int N 2e510,M2*N,mod998244353; #define int long long typedef long long LL; typedef pair<int, int> PII; typedef unsigned long long ULL; usi…...

编程日记 2024/4/4 12:23:08

【讲解下如何Stable Diffusion本地部署】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…...

编程日记 2024/4/4 12:19:05

wps斜线表头并分别打字教程

wps斜线表头怎么做并分别打字&#xff1a; 1、首先选中我们想要设置的表头。 2、接着右键选中它&#xff0c;点击“设置单元格格式” 3、然后点击上方“边框”选项卡。 4、随后选择图示的斜线&#xff0c;点击“确定” 5、设置完成后&#xff0c;我们只要在其中打字就可以在斜…...

编程日记 2024/4/4 12:17:03

2024第八届全国青少年无人机大赛暨中国航空航天科普展览会

2024第八届全国青少年无人机大赛暨中国航空航天科普展览会 邀请函 主办单位&#xff1a; 中国航空学会 重庆市南岸区人民政府 招商执行单位&#xff1a; 重庆港华展览有限公司 为更好的培养空航天产业人才&#xff0c;汇聚航空教育产业创新科技&#xff0c;丰富和完善航…...

编程日记 2024/4/4 12:16:02

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/1/27 18:11:42

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2026/1/26 21:56:38

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2026/1/31 6:09:18

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2026/2/2 20:26:17

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2026/1/30 14:31:07

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2026/2/1 17:00:54

第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...

编程新知 2026/1/31 20:22:32

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/10/1 4:57:11

6.计算机网络核心知识点精要手册

计算机网络核心知识点精要手册 1.协议基础篇 网络协议三要素 语法&#xff1a;数据与控制信息的结构或格式&#xff0c;如同语言中的语法规则语义&#xff1a;控制信息的具体含义和响应方式&#xff0c;规定通信双方"说什么"同步&#xff1a;事件执行的顺序与时序…...

编程新知 2025/9/26 21:47:06