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

第十五节——观察者watch

一、概念

在Vue中,watch是一个用于监听数据变化的功能。它可以监听一个或多个数据,并在数据发生变化时执行相应的操作。当我们需要在数据变化时执行异步操作、计算属性或执行一些副作用时,watch就派上了用场啦。注意。watch默认只能进行浅层次监听,如果数据非常复杂,则需要进行深度监听

二、基本使用

观察num变化,每次变化都会触发hello

<template><div>{{ num }}<button @click="num+=1">+1</button></div>
</template><script>
export default {data () {return {num: 1}},watch: {/*** 在watch中,要观察那个属性就直接把对应属性定义乘方法* * 接收两个参数* newVal 更新后的值* oldVal 更新前的值*/num (newVal, oldVal) {console.log(newVal, oldVal, '哈喽')}}
}</script>

三、immediate 立即触发

立即触发监听 默认情况下,watch在初始化时不会立即执行。如果我们希望在初始数据加载后立即触发监听,可以使用immediate选项

<template><div>{{ num }}<button @click="num+=1">+1</button></div>
</template><script>
export default {data () {return {num: 1}},watch: {/*** 把要观察的属性写成一个对象* 每次改变 都会触发 handler 方法 注意:只能叫handler* immediate 立即执行*/num: {handler (newVal, oldVal) {console.log(newVal, oldVal, '哈喽')},immediate: true}}
}</script>

四、深度监听

<template><div><!-- {{ num }} --><!-- <button @click="num += 1">+1</button> --><button @click="update">改变</button>{{ arr }}</div>
</template><script>
export default {data() {return {arr: [{ name: "张三", child: [{ name: "张三儿子" }] }],};},watch: {arr: {handler () {console.log("改变了吗")},deep: true}},methods: {update () {this.arr[0].child[0].name = '李四'}}
};
</script>

五、注意

1、避免过度使用Watch

Watch功能非常强大,但过度使用可能会导致代码变得难以理解和维护。在编写代码时,应仅在必要时使用watch,并尽量使用计算属性或方法来处理简单的数据变化。

2、避免在Watch中进行异步操作

虽然watch允许执行异步操作,但要谨慎使用。因为watch是在数据变化时被调用的,频繁的异步操作可能导致性能问题或引发意外的行为。如果需要进行异步操作,最好使用Vue提供的异步方法(如this.$nextTick或this.$emit)来触发操作。

3、避免无限循环

当在watch中修改被监听的数据时,可能会导致无限循环的问题。

4、使用深度监听时的性能影响

使用deep选项来深度监听对象或数组的变化时,需要注意性能问题。深度监听会递归遍历所有属性或元素,因此在大型数据结构上使用时可能会影响性能。如果可能的话,可以针对具体的属性进行监听,而不是整个对象或数组。

5、Watch与计算属性的选择

在某些情况下,watch和计算属性可以达到相同的效果。如果需要在数据变化时执行异步操作或有副作用时,应使用watch。而如果仅需要根据数据进行简单的变换和计算,则更适合使用计算属性

相关文章:

第十五节——观察者watch

一、概念 在Vue中&#xff0c;watch是一个用于监听数据变化的功能。它可以监听一个或多个数据&#xff0c;并在数据发生变化时执行相应的操作。当我们需要在数据变化时执行异步操作、计算属性或执行一些副作用时&#xff0c;watch就派上了用场啦。注意。watch默认只能进行浅层…...

tauri 访问静态资源,响应头为Content-Type:‘text/html‘

现象 报错&#xff1a; Error: THREE.FBXLoader: Unknown format. at FBXLoader.parse (index-f8291142.js:22050:15) at Object.onLoad (index-f8291142.js:22033:22) at index-f8291142.js:19769:20 使用threejs 加载fbx模型文件时&#xff0c;返回头中Content-…...

【佳学基因检测】Node.js中如何读取并调用内容

【佳学基因检测】Node.js中如何读取并调用内容 先给出功能实现代码&#xff1a; var http require(http); var fs require(fs); http.createServer(function (req, res) {fs.readFile(jiaxuejiyin.html, function(err, data) {res.writeHead(200, {Content-Type: text/html…...

java根据音频流或者音频的地址获取分贝的工具类

工具类 import lombok.extern.slf4j.Slf4j;import javax.sound.sampled.AudioFormat; import javax.sound.sampled.AudioInputStream; import javax.sound.sampled.AudioSystem; import javax.sound.sampled.UnsupportedAudioFileException; import java.io.BufferedInputStre…...

Pycharm出现的一些问题和解决办法

1.每次启动打开多个项目&#xff0c;速度很慢。改为每次启动询问打开哪个单一项目 Setting -> Appearance & Behavior -> System Settings -> Project -> 关闭Reopen projects on startop 2.一直显示《正在关闭项目closing project》&#xff0c;关不上 pycha…...

进程优先级(nice值,top指令),独立性,竞争性,进程切换(时间片),抢占与出让,并发并行概念

目录 优先级 引入 为什么会存在优先级 特点 优先级值 nice值 更改nice值 top指令 独立性 竞争性 进程切换 引入 时间片 上下文切换 调度器 抢占与出让 强占 出让 并发和并行 并发 并行 优先级 引入 与权限不同的是,权限是能不能做的问题,优先级是什…...

若依微服务集成Mybatis-plus详细教程

本章教程,主要介绍,若依开源框架微服务版本,如何集成Mybatis-plus。 目录 一、引入依赖 1、在根pom.xml中的properties里加入Mybatis-plus版本 2、在根pom.xml中引入Mybatis-plus依赖...

WebSocket:实现实时双向通信的利器

WebSocket&#xff1a;实现实时双向通信的利器 WebSocket是一种强大的协议&#xff0c;用于实现实时双向通信&#xff0c;允许客户端和服务器之间建立长久的连接&#xff0c;以便实时传递数据。这个协议在现代Web应用中发挥着至关重要的作用&#xff0c;因为它使得开发实时性要…...

【uniapp】html和css-20231031

我想用控件和样式来表达应该会更贴切&#xff0c;html和css的基础需要看看。 关于html&#xff1a;https://www.w3school.com.cn/html/html_layout.asp 关于css&#xff1a;https://www.w3school.com.cn/css/index.asp html让我们实现自己想要的布局&#xff08;按钮&#xff0…...

Docker Tomcat 搭建文件服务器

本文基于openwrt上进行。 步骤 1: 安装 Docker 如果尚未安装Docker&#xff0c;首先需要安装Docker。根据你的操作系统&#xff0c;参考Docker官方文档来完成安装, 这里不做详细介绍。 步骤 2: 拉去docker Tomcat镜像 进入openwrt管理界面&#xff0c;docker选项中 拉取最新…...

无感刷新 token

文章目录 背景基本思路需解决的问题请求进入死循环标记刷新 token 请求避免请求拦截覆盖 refresh token并发刷新 token 完整代码注意&#xff1a;拦截器注册顺序另一种方案&#xff1a;事件驱动刷新 前景提要&#xff1a; ts 简易封装 axios&#xff0c;统一 API 实现在 confi…...

【MISRA C 2012】Rule 2.6 函数不应该包含未使用的标签声明

1. 规则1.1 原文1.2 分类 2. 关键描述3. 代码实例 1. 规则 1.1 原文 Rule 2.6 A function should not contain unused label declarations Category Advisory Analysis Decidable, Single Translation Unit Applies to C90, C99 1.2 分类 规则2.6&#xff1a;函数不应该包含…...

Ubuntu:使用apache2部署Vue开发的网站

作者:CSDN @ _乐多_ 本文记录了Vue项目打包到部署到ubuntu系统的全部步骤。 文章目录 一、代码打包二、安装 Apache2三、开启/关闭apache23.1 开启3.2 关闭四、部署Vue应用到Apache24.1 首次部署4.2 更新部署五、全部操作截图一、代码打包 首先,确保您已经在本地开发环境中…...

使用IO完成端口实现简单回显服务器

说明 使用IO完成端口实现简单回显服务器&#xff0c;因为是测试用的&#xff0c;所以代码很粗糙。 提醒 使用的是ReadFile、WriteFile来实现Overlapped IO&#xff0c;正式场合应该用WSARecv、WSASend&#xff0c;原因&#xff1a;来自《Windows网络编程技术》 8.2.5节 在这里…...

【ROS】Nav2源码之nav2_behavior_tree详解

1、简介 nav2_bt_navigator实现ROS2节点以行为树的方式来处理。 nav2_behavior_tree模块提供如下功能: 一个c模板类&#xff0c;可以轻松地将ROS2 动作(actions)和服务(services)集成到行为树(Behavior Trees)中。特定于导航的行为树节点。通用的BehaviorTreeEngine类&#…...

SpringBoot---myBatis数据库操作

一&#xff0c;分页查询 现在controller中设置参数&#xff0c;RequestParam(defaultValue "1") 设置默认值 GetMapping public Result page(RequestParam(defaultValue "1") Integer page,RequestParam(defaultValue "10") Integer pageSize…...

力扣541.反转字符串II

原题链接&#xff1a;力扣541.反转字符串II 思路&#xff1a; 其实在遍历字符串的过程中&#xff0c;只要让 i (2 * k)&#xff0c;i 每次移动 2 * k 就可以了&#xff0c;然后判断是否需要有反转的区间。 因为要找的也就是每2 * k 区间的起点&#xff0c;这样写&#xff0c…...

撕掉Hadoop标签,Cloudera未来可期吗?

Cloudera&#xff1a;大数据的弄潮儿 1、Cloudera发展史2、透过Cloudera看清大数据时代的转变3、参考文章 1、Cloudera发展史 说起Cloudera&#xff0c;就不得不提起Hadoop&#xff0c;Cloudera的过去就是Hadoop时代中的一个缩影。作为全球第一家也是最大一家Hadoop商业化公司&…...

排序算法(1)

这里写目录标题 排序插入排序直接插入排序希尔排序 选择排序直接选择排序堆排序向下调整堆排序 交换排序冒泡排序 排序 插入排序 直接插入排序 直接插入排序是O&#xff08;N^2&#xff09;的排序算法 从0下标开始往后排 void InsertSort(int* a,int n)//直接插入排序 {fo…...

Top 5 Cutting-edge technology examples 2023

文章目录 Top 5 Cutting-edge technology examples 20231、Computer Vision2、Natural Language Processing3、Virtual Reality & Augmented Reality4、Deep Machine Learning5、Neuralink Top 5 Cutting-edge technology examples 2023 Cutting-edge technology in 2023 …...

FRCRN处理长音频文件实战:切片、批处理与结果合并

FRCRN处理长音频文件实战&#xff1a;切片、批处理与结果合并 你是不是遇到过这样的问题&#xff1f;手头有一段长达数小时的会议录音、访谈素材或者播客音频&#xff0c;背景噪音让人头疼&#xff0c;想用FRCRN这样的降噪模型处理一下&#xff0c;结果发现模型一次只能处理几…...

XiaoMusic:让小爱音箱突破音乐限制的开源解决方案

XiaoMusic&#xff1a;让小爱音箱突破音乐限制的开源解决方案 【免费下载链接】xiaomusic 使用小爱音箱播放音乐&#xff0c;音乐使用 yt-dlp 下载。 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaomusic 你是否遇到过这样的困扰&#xff1a;想听的歌曲在各大…...

探秘书匠策AI:毕业论文写作的“智慧引擎”

在学术探索的征途中&#xff0c;毕业论文如同一座巍峨的山峰&#xff0c;让无数学生既敬畏又向往。它不仅是对所学知识的综合检验&#xff0c;更是学术生涯的重要里程碑。然而&#xff0c;面对这座大山&#xff0c;许多人常常感到力不从心&#xff0c;选题迷茫、文献难觅、结构…...

ESLint代码规范(二)

通过配置文件来忽略对指定文件的代码检查ESLint低于7.0.0.eslintignore/config src/utils/**.prettierignore&#xff08;避免代码被 Prettier 的通用规则修改&#xff09;.eslintcache *.lock yarn-error.log src/utils/**ESLint大于7.0.0.eslintrc.js"ignorePatterns&qu…...

SpringBoot项目实战:用Java海康SDK搞定摄像头录像与门禁人脸下发(附完整代码)

SpringBoot企业级实战&#xff1a;海康威视SDK深度集成与智能安防系统开发 1. 企业级安防系统架构设计 在智能园区和现代化办公环境中&#xff0c;视频监控与门禁管理的无缝集成已成为刚需。海康威视作为全球领先的安防解决方案提供商&#xff0c;其设备SDK的深度集成能够为Jav…...

还在用老掉牙的HashTab?2024年最新文件哈希校验工具横向评测(附下载)

2024年文件哈希校验工具终极指南&#xff1a;告别过时方案&#xff0c;拥抱高效验证 还在为文件完整性验证发愁&#xff1f;每次下载重要软件都要反复核对哈希值却找不到趁手工具&#xff1f;作为从业十年的信息安全顾问&#xff0c;我见证了哈希校验工具从简陋到专业的演变。今…...

如何突破Cursor AI编程助手的使用限制:技术原理与实践指南

如何突破Cursor AI编程助手的使用限制&#xff1a;技术原理与实践指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your…...

实战演练:基于快马平台与vscode codex思想,快速构建业务数据可视化仪表盘

今天想和大家分享一个实战经验&#xff1a;如何快速构建一个业务数据可视化仪表盘。这个需求其实挺常见的&#xff0c;很多公司都需要通过直观的图表来展示销售数据、用户行为等关键指标。我最近在InsCode(快马)平台上尝试了这个项目&#xff0c;整个过程比想象中顺利很多。 需…...

农业遥感避坑指南:用大疆P4M多光谱数据生成NDVI,选智图还是Metashape?

农业遥感实战&#xff1a;大疆P4M多光谱数据NDVI生成工具选型指南 站在农田边缘&#xff0c;手持大疆精灵4多光谱版&#xff08;P4M&#xff09;遥控器的你&#xff0c;刚刚完成了一次作物长势监测飞行。无人机带回的宝贵数据&#xff0c;正等待转化为直观的NDVI图——这张&quo…...

7个实用技巧让Continue AI编程助手提升开发效率

7个实用技巧让Continue AI编程助手提升开发效率 【免费下载链接】continue ⏩ Source-controlled AI checks, enforceable in CI. Powered by the open-source Continue CLI 项目地址: https://gitcode.com/GitHub_Trending/co/continue 在当今快节奏的开发环境中&#…...