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

vue watch 深度监听

vue2文档:API — Vue.js

vue3文档:侦听器 | Vue.js

        watch 可以用来监听页面中的数据,但如果监听的源是对象数组,则使用深度监听,强制深度遍历源,以便在深度变更时触发回调。

一,监听

<template><div><h1>{{ sum }}</h1><button @click="addSum">+1</button></div>
</template>
<script>
export default {data() {return {sum: 18}},watch: {sum: function (newValue, oldValue) {console.log(newValue, oldValue);}},methods: {addSum() {this.sum = this.sum + 1}}
}
</script>

        普通用法,可以监听到sum的值。

二,深度监听

        但如果要监听对象或数组里的元素,上面的方法不能使用。需要加 deep 和 handler,给对象的每一个属性添加一个监听器。

<template><div><h1>{{ data.a }}</h1><button @click="addA">+1</button></div>
</template>
<script>
export default {data() {return {data: {a: 14,b: 16}}},watch: {data: {handler: function (newValue) {console.log(newValue);},deep: true}},methods: {addA() {this.data.a = this.data.a + 1}}
}
</script>

        深度监听将 deep 改为 true,代表是否进行深度监听,默认为 false,监听会一层层向下遍历,给对象的每一个属性都添加一个监听器。

        在 handler 中编写需要执行的代码。

        如果只想监听其中一个属性,这种方法会造成资源的浪费,因为给对象的每一个属性都添加了监听器,一次监听会得到对象中的所有属性。

只监听对象的某一属性

        可以将监听的属性用字符串的类型表示,这样只会监听对象其中的某一个属性。

<template><div><h1>{{ data.a }}</h1><button @click="addA">+1</button></div>
</template>
<script>
export default {data() {return {data: {a: 14,b: 16}}},watch: {'data.a': {handler: function (newValue) {console.log(newValue);},deep: true}},methods: {addA() {this.data.a = this.data.a + 1}}
}
</script>

相关文章:

vue watch 深度监听

vue2文档&#xff1a;API — Vue.js vue3文档&#xff1a;侦听器 | Vue.js watch 可以用来监听页面中的数据&#xff0c;但如果监听的源是对象或数组&#xff0c;则使用深度监听&#xff0c;强制深度遍历源&#xff0c;以便在深度变更时触发回调。 一&#xff0c;监听 <t…...

Qt源码调试步骤记录

1.源码&#xff1a; 两种方式&#xff0c;要么安装qt时选择source&#xff0c;要么从官网下载源码&#xff0c;然后在qt creator中设置路径。二选一即可。我选的第二种。 1.1.第一种&#xff0c;安装时选择source&#xff1a; 1.2.第二种&#xff0c;下载源码设置路径&#x…...

大数据面试英文自我介绍参考(万字长文)

发现有一个怪圈,如果码农年龄35+,除非非常匹配,不然在国内企业筛选可能就筛选不过。国外码农可以干到40+、50+。一些外企,对年龄35+的码农依然青睐。这些外企对英文是有要求,通常是要英文自我介绍,下面提供一些英文自我介绍参考。 参考1: Good morning/afternoon, I a…...

外包干了5天,技术退步明显.......

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入杭州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…...

Docket常见的软件部署1

1 安装MySQL # 查看MySQL镜像 docker search mysql # 拉起镜像 docker pull mysql:5.7 # 创建MySQL数据映射卷&#xff0c;防止数据不丢失 mkdir -p /hmoe/tem/docker/mysql/data/ # 启动镜像 docker run -d --name mysql -e MYSQL_ROOT_PASSWORD123456 -p 3306:3306 -v /home…...

Qt源程序编译及错误问题解决

Error 5 while parsing C:/qt-everywhere-src-6.6.2/qt-build/qtdeclarative/src/qmlmodels/meta_types/qt6qmlmodels_release_metatypes.json: illegal value .json 文件为空文件0字节&#xff0c;加 “[]”&#xff0c;不要引号。可以解决这类错误。 Qt编译 Qt for Windows…...

作业练习(python)

第一题&#xff1a; cel eval(input()) fah 9 / 5 * cel 32 print("%.1f" % fah) 第二题&#xff1a; radius, length eval(input()) area radius * radius * 3.14159267 volume area * length print("%.2f" % area) print("%.2f" …...

Wireshark使用相关

1.wireshark如何查看RST包 tcp.flags.reset1 RST表示复位&#xff0c;用来异常的关闭连接&#xff0c;在TCP的设计中它是不可或缺的。发送RST包关闭连接时&#xff0c;不必等缓冲区的包都发出去&#xff08;不像上面的FIN包&#xff09;&#xff0c;直接就丢弃缓存区的包发送R…...

相机标定学习记录

相机标定是计算机视觉和机器视觉领域中的一项基本技术&#xff0c;它的主要目的是通过获取相机的内部参数&#xff08;内参&#xff09;和外部参数&#xff08;外参&#xff09;&#xff0c;以及镜头畸变参数&#xff0c;建立起现实世界中的点与相机成像平面上对应像素点之间准…...

CSS 滚动条样式修改

1、滚动条整体部分 使用 ::-webkit-scrollbar 注意&#xff1a;这个必须要加&#xff0c;不然修改的样式不生效 ::-webkit-scrollbar {width: 10px;//修改滚动条宽度 }2、滚动条中的滑块 使用 ::-webkit-scrollbar-thumb ::-webkit-scrollbar-thumb {border-radius: 8px;b…...

谈谈配置中心?

配置中心可以做集中式的服务配置管理&#xff0c;比如配置一些数据库连接的URL&#xff0c;一些共用的配置且可动态调整的参数。如果不采用集中式的管理&#xff0c;会导致修改起来特别麻烦&#xff0c;一个个的修改特别繁琐。 Nacos Config配置中心中采用的是客户端拉取数据&a…...

人工智能(pytorch)搭建模型25-基于pytorch搭建FPN特征金字塔网络的应用场景,模型结构介绍

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能(pytorch)搭建模型25-基于pytorch搭建FPN特征金字塔网络的应用场景&#xff0c;模型结构介绍。特征金字塔网络&#xff08;FPN&#xff09;是一种深度学习模型结构&#xff0c;主要应用于目标检测任务中&am…...

JRT业务开发起步

这是一段充满挑战与奋斗的旅程&#xff0c;自第一行Java代码的写下起&#xff0c;便历经重重险阻。从细微的代码行&#xff0c;逐步汇聚成实用的工具类方法&#xff1b;从工具类方法的积累&#xff0c;逐渐构建起功能强大的工具包&#xff1b;再从工具包的整合&#xff0c;最终…...

深度解析:国内主流音视频产品的核心功能与市场表现

前言 当前音视频开发领域呈现出多样化竞争态势&#xff0c;其中声网&#xff08;Agora&#xff09;、即构&#xff08;ZEGO&#xff09;等云通讯企业占据了市场的主导地位。随着技术的持续进步和用户需求的日益多样化&#xff0c;选择音视频服务提供商的标准也越来越个性化&am…...

红黑树介绍及插入操作的实现

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f648;个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&…...

[linux初阶][vim-gcc-gdb] TwoCharter: gcc编译器

目录 一.Linux中gcc编译器的下载与安装 二.使用gcc编译器来翻译 C语言程序 ①.编写C语言代码 ②翻译C语言代码 a.预处理 b.编译 c.汇编 d.链接 ③.执行Main 二进制可执行程序(.exe文件) 三.总结 一.Linux中gcc编译器的下载与安装 使用yum命令(相当于手机上的应用…...

单例设计模式(2)

单例设计模式&#xff08;2&#xff09; 单例模式存在的问题 单例对 OOP 特性的支持不友好 oop的特性&#xff1a;封装、继承、多态、抽象&#xff1b;以Id生成器代码为例&#xff0c;如果未来某一天&#xff0c;我们希望针对不同的业务采用不同的 ID 生成算法。比如&#x…...

boost::asio 启用 io_uring(Linux 5.10)队列支持

欲启用 boost::asio 对于 io_uring 的支持&#xff0c;这需要以下几个先决条件&#xff1b; 1、boost 1.78 及以上发行版本 Revision History - 1.78.0 (boost.org) 2、Linux kernel 5.10 及以上发行版本 3、在预定义头文件&#xff08;stdafx.h&#xff09;、或编译器预定义…...

Android 自定义坐标曲线图(二)

Android 自定义坐标曲线图_android 自定义曲线图-CSDN博客 继上一篇文章&#xff0c;点击折线图上的点&#xff0c;显示提示信息进行修改&#xff0c;之前通过回调&#xff0c;调用外部方法&#xff0c;使用popupwindow或dialog来显示&#xff0c;但是这种方法对于弹框显示的位…...

每日OJ题_子序列dp⑧_力扣446. 等差数列划分 II - 子序列

目录 力扣446. 等差数列划分 II - 子序列 解析代码 力扣446. 等差数列划分 II - 子序列 446. 等差数列划分 II - 子序列 难度 困难 给你一个整数数组 nums &#xff0c;返回 nums 中所有 等差子序列 的数目。 如果一个序列中 至少有三个元素 &#xff0c;并且任意两个相邻…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

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

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

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...