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

Vue监听器watch的基本用法

news 文章来源：https://blog.csdn.net/zsx0728/article/details/137334224 2024/11/1 22:39:04

文章目录

        • 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

fastadmin学习08-查询数据渲染到前端

index.php查询&#xff0c;这个是前台的index.php public function index() {$slideImgs Db::name("slideimg")->where("status",,normal)->limit(5)->order(sort,desc)->select();$productList Db::name("product")->where(…...

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

实验报告答案

基本任务&#xff08;必做&#xff09; 先用普通用户&#xff08;自己的姓名拼音&#xff09;登录再操作 编程有代码截图和执行过程结果截图 代写获取&#xff1a; https://laowangall.oss-cn-beijing.aliyuncs.com/studentall.pdf 1. Linux的Shell编程 &#xff08;1&am…...

编程日记 2024/4/4 12:12:59

PDF编辑和格式转换工具 Cisdem PDFMaster for Mac

Cisdem PDFMaster for Mac是一款功能强大的PDF编辑和格式转换工具。它为用户提供了直观且易于使用的界面&#xff0c;使常用功能触手可及&#xff0c;从而帮助用户轻松管理、编辑和转换PDF文件。 软件下载&#xff1a;Cisdem PDFMaster for Mac v6.0.0激活版下载 作为一款完整的…...

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

E-魔法猫咪（遇到过的题，做个笔记）

题解&#xff1a; 来自学长们思路&#xff1a; 其中一种正解是写单调队列。限制队列内的数单调递增&#xff0c;方法为每当新来的数据比当前队尾数据小时队 尾出列&#xff0c;直到能够插入当前值&#xff0c;这保证了队头永远是最小值。因此总体思路是队尾不断插入新值的同时 …...

编程日记 2024/4/4 12:09:56

keil创建工程 芯源半导体CW32F003E4P7

提前下载keil 安装步骤 1、下载CW32F003固件库 芯源半导体官网下载固件库 下载好后右键解压 CW32F003_StandardPeripheralLib_V1.5\IdeSupport\MDK 进入MDK文件夹 双击WHXY.CW32F003_DFP.1.0.4.pack安装固件库 点击next然后finish安装结束 keil创建工程 点击new uVision P…...

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

学习鸿蒙基础（12）

目录 一、网络json-server配置 &#xff08;1&#xff09;然后输入&#xff1a; &#xff08;2&#xff09;显示下载成功。但是输入json-server -v的时候。报错。 &#xff08;3&#xff09;此时卸载默认的json-server &#xff08;4&#xff09;安装和nodejs匹配版本的js…...

编程日记 2024/4/4 12:06:53

HTML5和CSS3笔记

一&#xff1a;网页结构(html)&#xff1a; 1.1&#xff1a;页面结构&#xff1a; 1.2&#xff1a;标签类型&#xff1a; 1.2.1&#xff1a;块标签&#xff1a; 1.2.2&#xff1a;行内标签&#xff1a; 1.2.3&#xff1a;行内块标签&#xff1a; 1.2.4&#xff1a;块标签与行…...

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

MHA高可用-解决MySQL主从复制的单点问题

目录 一、MHA的介绍 1&#xff0e;什么是 MHA 2&#xff0e;MHA 的组成 2.1 MHA Node&#xff08;数据节点&#xff09; 2.2 MHA Manager&#xff08;管理节点&#xff09; 3&#xff0e;MHA 的特点 4. MHA工作原理总结如下&#xff1a; 二、搭建 MySQL MHA 实验环境 …...

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

【多线程】震惊~这是我见过最详细的ReentrantLock的讲解

一.与synchronized相比ReentrantLock具有以下四个特点: 可中断&#xff1a;synchronized只能等待同步代码块执行结束&#xff0c;不可以中断&#xff0c;强行终断会抛出异常, 而reentrantlock可以调用线程的interrupt方法来中断等待&#xff0c;继续执行下面的代码。 在获取锁…...

编程日记 2024/4/4 11:59:45

分布式链路追踪与云原生可观测性

分布式链路追踪系统历史 Dapper, a Large-Scale Distributed Systems Tracing Infrastructure - Google Dapper&#xff0c;大规模分布式系统的跟踪系统大规模分布式系统的跟踪系统&#xff1a;Dapper设计给我们的启示 阿里巴巴鹰眼技术解密 - 周小帆京东云分布式链路追踪在金…...

编程日记 2024/4/4 11:58:44

网站建设与设计致谢/网络营销推广流程

这部分内容比较繁琐&#xff0c;但很简单&#xff0c;在此条理地介绍一下。 1.首先&#xff0c;介绍&#xff1a;对类中成员的访问方式 先举一个例子&#xff0c;了解水平访问和垂直访问 #include "iostream.h" using namespace std; class A { private: in…...

编程日记 2024/11/1 19:10:46

制作流程图的网站/湖南百度推广公司

实现虚拟化的方法不止一种&#xff0c;各种方法都可以通过不同层次的抽象来实现相同的结果。本文将给大家介绍Linux中常用的4种虚拟化方法&#xff0c;以及它们相应的优缺点。业界有时会使用不同的术语来描述相同的虚拟化方法。(1)硬件仿真。毫无疑问&#xff0c;最复杂的虚拟化…...

编程日记 2024/11/1 18:47:43

天津企业免费建站/优化大师官网入口

计算机网络在IT行业的重要性 IT即互联网技术&#xff0c;从事的工作和网络有很大的关系&#xff0c;前端要负责和后台(服务器)进行交互&#xff0c;其必然得经过网络&#xff0c;所以懂点网络知识有很大的帮助。 一道经典的面试题 问&#xff1a;在浏览器输入网址到看到页面经历…...

编程日记 2024/11/1 16:28:38

惠州网站建设如何/百度官方首页

一&#xff0c;IOC容器初始化入口 Spring的容器的启动方式有很多种&#xff0c;上篇博文中有做过分析&#xff0c;Spring容器的初始化根本还是ApplicationContext的实例化过程&#xff0c;表现形式的多样化决定了容器不同的初始化方式&#xff0c;但是方式差异性主要还是体现在…...

编程日记 2024/11/1 14:05:58

如何判断网站做的关键词/宁德市区哪里好玩

此功能是通过shell32.dll中一个索引号为60的API函数调用&#xff0c;显示"关闭Windows"对话窗口实现的。具体方法为IDC_SHUTDOWNCOMPUTER按钮添加BN_CLICKED消息处理函数&#xff1a;void CControlDlg::OnShutdowncomputer() { HINSTANCE hInstLoadLibrary("…...

编程日记 2024/11/1 13:12:54

哪些企业网站做的好/企业官网首页设计

知识回顾:当鼠标在窗口内移动,点击或者释放时都会产生WM_NCHITTEST消息,响应函数OnNcHitTest会返回一个枚举值,系统会根据这个枚举值进行相应的处理。 当返回值为HTCAPTION时,系统会认为此时鼠标位于标题栏上,因而当鼠标按下并移动时就会执行拖动操作。我们需要做的就是响应这个…...

编程日记 2024/11/1 11:34:29