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

this.$watch 侦听器 和 停止侦听器

使用组件实例的$watch()方法来命令式地创建一个侦听器;

它还允许你提前停止该侦听器
        语法:this.$watch(data, method, object)
        1. data:侦听的数据源,类型为String
        2. method:回调函数,参数一新值,参数二旧值
        3.object:配置
                a. deep:深度侦听
                b. immediate:创建时立即触发
                c. flush: 'post':更改回调机制(DOM更新后)

<script>
export default {data: () => ({account: 'Abc', // 账号emp: {name: 'Jack', // 名字salary: 7000 // 薪资},student: {name: 'Annie', // 名字age: 18 // 年龄}}),// 声明周期函数:页面成功渲染后mounted() {// 通过组件的实例调用$watch函数来创建侦听器// 语法:this.$watch(data, method, object)// 1. data:侦听的数据源,类型为String// 2. method:回调函数,参数一新值,参数二旧值// 3. object:配置//   a. deep:深度侦听//   b. immediate:创建时立即触发//   c. flush: 'post':更改回调机制(DOM更新后)this.$watch('account', (newData, oldData) => {console.log('账号的新旧值:')console.log(newData)console.log(oldData)})this.$watch('emp.salary', (newData, oldData) => {console.log('薪资的新旧值:')console.log(newData)console.log(oldData)}, { immediate: true })this.$watch('student', (newData, oldData) => {console.log('学生的新旧值:')console.log(newData)console.log(oldData)console.log(document.getElementById('titleAge').innerHTML)}, { deep: true, flush: 'post' })}
}
</script><template>账号:<input type="text" v-model="account"><hr>薪资:<input type="numner" v-model="emp.salary"><hr><h3 id="titleAge">学生年龄:<span>{{ student.age }}</span></h3>学生年龄:<input type="numner" v-model="student.age">
</template>

停止侦听器,需要自行停止侦听器,这时可以调用$watch() API 返回的函数

<script>
export default {data: () => ({account: 'Abc', // 账号stopAccountWatch: null // 调用该函数,可以停止侦听账号数据源}),// 声明周期函数:页面成功渲染后mounted() {this.stopAccountWatch = this.$watch('account', (newData, oldData) => {console.log('账号的新旧值:')console.log(newData)console.log(oldData)})}
}
</script><template>账号:<input type="text" v-model="account"><button @click="stopAccountWatch">停止侦听账号数据源</button>
</template>

 

 

相关文章:

this.$watch 侦听器 和 停止侦听器

使用组件实例的$watch()方法来命令式地创建一个侦听器&#xff1b; 它还允许你提前停止该侦听器 语法&#xff1a;this.$watch(data, method, object) 1. data&#xff1a;侦听的数据源&#xff0c;类型为String 2. method&#xff1a;回调函数&#x…...

P1030 [NOIP2001 普及组] 求先序排列题解

题目 给出一棵二叉树的中序与后序排列。求出它的先序排列。&#xff08;约定树结点用不同的大写字母表示&#xff0c;且二叉树的节点个数≤8&#xff09;。 输入输出格式 输入格式 共两行&#xff0c;均为大写字母组成的字符串&#xff0c;表示一棵二叉树的中序与后序排列。…...

【分布式】NCCL Split Tree kernel内实现情况 - 06

相关系列 【分布式】NCCL部署与测试 - 01 【分布式】入门级NCCL多机并行实践 - 02 【分布式】小白看Ring算法 - 03 【分布式】大模型分布式训练入门与实践 - 04 目录 相关系列概述1.1 Tree1.2 double binary tree初始化和拓扑2.1 Tree的初始化与差异2.2 ncclGetBtreeKernel内部…...

C语言深入学习 --- 4.自定义类型(结构体+枚举+联合)

第四章 自定义类型&#xff1a;结构体&#xff0c;枚举&#xff0c;联合 结构体 结构体类型的声明 结构的自引用 结构体变量的定义和初始化 结构体的内存对齐 结构体实现位段&#xff08;位段的填充 和 可移植性&#xff09; 枚举 枚举类型的定义 枚举的优点 枚举的使…...

AI自然语言中默认上下文长度4K 几K是什么意思?

环境&#xff1a; 4K 问题描述&#xff1a; AI自然语言中默认上下文长度4K 几K是什么意思&#xff1f; 解决方案&#xff1a; 在自然语言处理中&#xff0c;“k” 表示 “千”&#xff0c;是一种简写方式。当我们说 “4k” 时&#xff0c;实际上指的是 “4,000”。在上下文…...

vSphere 8考试认证题库 2024最新(VCP 8.0版本)

VMware VCP-DCV&#xff08;2V0-21.23&#xff09;认证考试题库&#xff0c;已全部更新&#xff0c;答案已经完成校对&#xff0c;完整题库请扫描上方二维码访问。正常考可以考到450分以上&#xff08;满分500分&#xff0c;300分通过&#xff09; An administrator is tasked …...

系统学习Python——装饰器:“私有“和“公有“属性案例-[装饰器参数、状态保持和外层作用域]

分类目录&#xff1a;《系统学习Python》总目录 文章《系统学习Python——装饰器&#xff1a;“私有“和“公有“属性案例-[实现私有属性]》中使用的类装饰器接受任意多个参数来命名私有属性。然而真正发生的情况是&#xff0c;参数传递给了Private函数&#xff0c;然后Private…...

星辰天合参与编制 国内首个可兼顾 AI 大模型训练的高性能计算存储标准正式发布

近日&#xff0c;在中国电子工业标准化技术协会高标委的支持和指导下&#xff0c;XSKY星辰天合作为核心成员参与编制的《高性能计算分布式存储系统技术要求》团体标准&#xff0c;在中国电子工业标准化技术协会网站正式发布。 该团体标准强调了分布式存储系统对包括传统高性能计…...

算法训练day38动态规划基础Leetcode509斐波纳切数70爬楼梯746使用最小花费爬楼梯

什么是动态规划 对于动态规划问题&#xff0c;我将拆解为如下五步曲&#xff0c;这五步都搞清楚了&#xff0c;才能说把动态规划真的掌握了&#xff01; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义确定递推公式dp数组如何初始化确定遍历顺序举例推导dp数组&a…...

Leetcode 206. 反转链表

给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1] 示例 3&#xff1a; 输…...

电子科技大学课程《计算机网络系统》(持续更新)

前言 本校的课程课时有所缩减&#xff0c;因此可能出现与你学习的课程有所减少的情况&#xff0c;因此对其他学校的同学更多的作为参考作用。本文章适合学生的期中期末考试&#xff0c;以及想要考研电子科技大学的同学&#xff0c;电子科技大学同学请先看附言。 第一章 计算…...

HBase介绍、特点、应用场景、生态圈

目录: 一、HBase简介 二、NoSQL和关系型数据库对比 三、HBase特点 四、应用场景 五、HBase生态圈技术 一、HBase简介 HBase是一个领先的NoSQL数据库 是一个面向列存储的NoSQL数据库 是一个分布式Hash Map&#xff0c;底层数据是Key-Value格式 基于Coogle Big Table论文 使用HD…...

蓝桥杯错误记录

今天在做 小蜜蜂的综合案例的时候&#xff0c;数码管显示&#xff0c;有重影。 #include <STC15F2K60S2.H> unsigned char num; unsigned char code Duan[22]{0xc0,0xf9,0xa4,0xb0,0x99,0x92,0x82,0xf8,0x80,0x90,0x88,0x80, 0xc6,0xc0,0x86,0x8e,0xbf,0x7f,0XC1,0X8C,0…...

Spring-静态代理VS动态代理/实现代理ProxyFactory

文章目录 静态代理VS动态代理Spring实现代理ProxyFactory 工作中遇到问题整理动态代理异常com.sun.proxy.$Proxy0 cannot be cast to 静态代理VS动态代理 静态代理VS动态代理 参考URL: https://blog.csdn.net/qq_25881443/article/details/103245938 【java项目实战】代理模式…...

单片机精进之路-9ds18b20温度传感器

ds18b20复位时序图&#xff0c;先将b20的数据引脚拉低至少480us&#xff0c;然后再将数据引脚拉高15-60us&#xff0c;再去将测传感器的数据引脚是不是变低电平并保持60-240us&#xff0c;如果是&#xff0c;则说明检测到温度传感器&#xff0c;并正常工作。需要在240us后才能检…...

支部管理系统微信小程序(管理端+用户端)flask+vue+mysql+微信小程序

系统架构如图所示 高校D支部管理系统 由web端和微信小程序端组成&#xff0c;由web端负责管理&#xff0c;能够收缴费用、发布信息、发布问卷、发布通知等功能 部分功能页面如图所示 微信小程序端 包含所有源码和远程部署&#xff0c;可作为毕设课设...

4、Linux-常用命令(二)

目录 一、搜索命令 1、命令搜索命令 2、文件搜索命令find。格式&#xff1a;find [搜索范围] [搜索条件]。 3、字符串搜索命令grep 二、帮助命令 1、man【详细的帮助】 2、--help【简要的帮助】 三、压缩与解压命令 1、.zip格式 2、.gz格式 3、打包 四、关机和重启命…...

golang实现openssl自签名双向认证

第一步&#xff1a;生成CA、服务端、客户端证书 1. 生成CA根证书 生成CA证书私钥 openssl genrsa -out ca.key 4096创建ca.conf 文件 [ req ] default_bits 4096 distinguished_name req_distinguished_name[ req_distinguished_name ] countryName …...

【学习】torchvision.datasets.ImageFolder()

在分类任务中&#xff0c;数据集文件存储往往是如下形式&#xff1a; - train- class1- image1.jpg- image2.jpg...- class2- image1.jpg- image2.jpg......此时&#xff0c;我们想要获取图片和标签&#xff0c;标签即为文件名&#xff08;class1、class2…&#xff09; 可以使…...

pyinstaller打包的exe运行报错 No module named path

描述 用python开发了一个opc client应用&#xff0c;调试没有问题后&#xff0c;使用pyinstaller打包成exe&#xff0c;测试exe运行也没有问题&#xff0c;正常使用。 在某次重装win10系统后&#xff0c;在此运行exe就开始报错了&#xff0c;详细内容如下&#xff1a; ------…...

PySR社区贡献指南:如何参与这个革命性符号回归开源项目的开发

PySR社区贡献指南&#xff1a;如何参与这个革命性符号回归开源项目的开发 【免费下载链接】PySR High-Performance Symbolic Regression in Python and Julia 项目地址: https://gitcode.com/gh_mirrors/py/PySR 想要为高性能符号回归工具PySR做出贡献吗&#xff1f;这份…...

5年java开发经验总结面试题-内含完整答案

1、讲讲IO里面的常见类&#xff0c;字节流、字符流、接口、实现类、方法阻塞。 文件字节输入输出流 FileInputStream/FileOutputStream&#xff0c; 文件字符流 FileReader/FileWriter 包装流PrintStream/PrintWriter/Scanner 字符串输入输出流StringReader/StringWriter 转换流…...

从轨迹到网络:广州休闲步行空间格局刻画 | 论文全解析与方法论深度拆解

从轨迹到网络:广州休闲步行空间格局刻画 | 论文全解析与方法论拆解 原文:From trajectories to network: Delineating the spatial pattern of recreational walking in Guangzhou》 一、论文核心概览:摘要与关键词 1.1 核心摘要解析 本文的核心内容可拆解为5个核心模块,…...

易语言实现阶乘与组合数计算

是的&#xff0c;我听说过易语言&#xff0c;它是一款面向中文使用者的编程语言&#xff0c;以其直观的中文语法和图形化界面开发能力而著称。 一、 数学概念解析 在深入编程实现前&#xff0c;我们先明确两个基础的数学概念。 1. 阶乘 阶乘 是所有小于及等于该数的正整数的…...

别再手动校正了!用Landsat 9 L2SP地表反射率数据,在QGIS里5分钟搞定NDVI和水体提取

遥感分析效率革命&#xff1a;用Landsat 9 L2SP数据在QGIS中实现5分钟精准制图 当遥感数据处理流程从传统数小时缩短至五分钟&#xff0c;这意味着什么&#xff1f;去年在亚马逊雨林监测项目中&#xff0c;我们团队曾因大气校正步骤延误错过了最佳干预时机。如今Landsat 9 L2SP…...

用Rust还是JavaScript?Tauri 2.0系统托盘开发的两种姿势与选型建议

Tauri 2.0系统托盘开发&#xff1a;Rust与JavaScript的技术选型深度解析 当桌面应用需要常驻后台运行时&#xff0c;系统托盘功能便成为用户体验的关键组件。Tauri 2.0作为新一代跨平台桌面框架&#xff0c;允许开发者在前端JavaScript与后端Rust两种技术栈中实现这一功能。本文…...

腾讯游戏卡顿终极解决方案:ACE-Guard资源限制器完整指南

腾讯游戏卡顿终极解决方案&#xff1a;ACE-Guard资源限制器完整指南 【免费下载链接】sguard_limit 限制ACE-Guard Client EXE占用系统资源&#xff0c;支持各种腾讯游戏 项目地址: https://gitcode.com/gh_mirrors/sg/sguard_limit 你是否在玩《地下城与勇士》、《英雄…...

嵌入式工程师技术成长路径:从单片机到Linux驱动开发

嵌入式工程师职业发展路径的技术思考1. 职业发展阶段与技术演进1.1 单片机开发阶段对于刚毕业的电子工程专业学生&#xff0c;单片机开发通常是职业起点。这一阶段主要涉及&#xff1a;8/16/32位微控制器(如STM32系列)的应用开发基础外设驱动开发(GPIO、UART、SPI、I2C等)实时操…...

RTX4090D显存优化:OpenClaw+Qwen3-32B-Chat批量处理千页PDF

RTX4090D显存优化&#xff1a;OpenClawQwen3-32B-Chat批量处理千页PDF 1. 为什么需要显存优化 当我第一次尝试用OpenClaw对接Qwen3-32B-Chat处理PDF文档时&#xff0c;遇到了一个棘手的问题——显存爆炸。当时只是处理一个200页的PDF&#xff0c;显存占用就飙到了22GB&#x…...

STM32F103C8T6驱动无FIFO的OV7670:从时序理解到图像显示的完整避坑指南

STM32F103C8T6驱动无FIFO的OV7670&#xff1a;从时序理解到图像显示的完整避坑指南 当你第一次将OV7670摄像头模块连接到STM32F103C8T6开发板时&#xff0c;可能会被那些看似简单的时序信号搞得晕头转向。VSYNC、HREF、PCLK——这些信号线背后隐藏着图像数据采集的全部秘密。本…...