Watch数据监听详解

一、Vue2写法

1、watch使用的几种方法

1、通过 watch 监听 data 数据的变化,数据发生变化时,就会打印当前的值

 watch: {data(val, value) {console.log(val)console.log(value)}}

2、通过 watch 监听 list 数据的变化,数据发生变化时,this.number++(使用深度监听)

 data() {return {list: {'id': 1,'type': 0},number: 0}},watch: {list: {handler(newVal) {this.number++},deep: true}}

3、通过 watch 监听 data 数据的变化,数据发生变化时,执行 change 方法

 watch: {data: 'change' // 值可以为methods的方法名},methods: {change(curVal,oldVal){console.log(curVal,oldVal)}}

2、watch中的immediate、handler和deep属性

1.immediate 和 handler

  1. handler属性在watch中的作用是指定一个回调函数,在监视的数据发生变化时被调用
  2. 这样使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
 data() {return {list: {'id': 1,'type': 0},number: 0}},watch: {list: {handler(newVal) {this.number++},immediate: true}}

2.deep深度监听

        当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听

 data() {return {list: {'id': 1,'type': 0},number: 0}},watch: {list: {handler(newVal) {this.number++},deep: true}    }

        设置deep:true则可以监听到 list.id 的变化,此时会给 list 的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行 handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:

 data() {return {list: {'id': 1,'type': 0}}},watch: {'list.id': {handler(newVal, oldVal) {......},deep: true}    }

这样只会给对象的某个特定的属性加监听器

3、总结

        数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听

二、Vue3写法

侦听一个或者多个数据的变化,数据变化时执行回调函数,俩个额外参数 immediate控制立刻执行,deep开启深度侦听

1、侦听单个数据

 <script setup>// 1. 导入watchimport { ref, watch } from 'vue'const count = ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue)=>{console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`)})</script>

2、侦听多个数据

侦听多个数据,第一个参数可以改写成数组的写法

 <script setup>// 1. 导入watchimport { ref, watch } from 'vue'const count = ref(0)const name = ref('cp')// 2. 调用watch 侦听变化watch([count, name], ([newCount, newName],[oldCount,oldName])=>{console.log(`count或者name变化了,[newCount, newName],[oldCount,oldName])})</script>

3、immediate属性

在侦听器创建时立即出发回调,响应式数据变化之后继续执行回调

 <script setup>// 1. 导入watchimport { ref, watch } from 'vue'const count = ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue)=>{console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`)},{immediate: true})</script>

4、deep(深度监听)

通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep

 <script setup>// 1. 导入watchimport { ref, watch } from 'vue'const state = ref({ count: 0 })// 2. 监听对象statewatch(state, ()=>{console.log('数据变化了')})const changeStateByCount = ()=>{// 直接修改不会引发回调执行state.value.count++}</script>​<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const state = ref({ count: 0 })// 2. 监听对象state 并开启deepwatch(state, ()=>{console.log('数据变化了')},{deep:true})const changeStateByCount = ()=>{// 此时修改可以触发回调state.value.count++}</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/55330.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

信息化发展2

信息系统生命周期 1 、软件的生命周期通常包括&#xff1a;可行性分析与项目开发计划、需求分析、概要设计、详细设计、编码、测试、维护等阶段。 2 、信息系统的生命周期可以简化为&#xff1a;系统规划&#xff08;可行性分析与项目开发计划&#xff09;&#xff0c;系统分析…

Unity 之 transform.rotate() 实现旋转

文章目录 详细介绍默认情况下&#xff0c;以局部坐标 详细介绍 在Unity中&#xff0c;Transform.Rotate() 是一个用于在物体上进行旋转的函数。它可以用来在局部坐标系下对物体进行旋转&#xff0c;也可以在世界坐标系下进行旋转。下面是关于 Transform.Rotate() 的详细介绍&a…

2. 使用IDEA创建Spring Boot Hello项目并管理依赖——Maven入门指南

前言&#xff1a;本文将介绍如何使用IDEA创建一个Spring Boot Hello项目&#xff0c;并通过Maven来管理项目的依赖。我们从项目的创建到代码的编写&#xff0c;再到项目的构建和运行&#xff0c;一步步演示了整个过程。 &#x1f680; 作者简介&#xff1a;作为某云服务提供商的…

DataFun:推荐系统峰会

工程架构与训练推理 TFDE 多场景多目标融合 企业知识推荐系统 ATA内部社区 房产推荐场景的算法实践

chatGPT界面

效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html> <head><title>复选框样式示例</title> </head> <style>* {padding:0;margin: 0;}.chatpdf{display: flex;height: 100vh;flex-direction: row;}.chatpdf .pannel{widt…

mysql 获取json数组中某个字段根据下标

MySQL获取JSON数组中某个字段根据下标 在MySQL中&#xff0c;JSON数据类型可以方便地存储、操作和查询包含复杂结构的数据。当我们需要从JSON数组中获取某个字段时&#xff0c;可以使用MySQL的JSON函数来实现。 1. JSON数据类型简介 JSON&#xff08;JavaScript Object Nota…

回归预测 | MATLAB实现SSA-ELM麻雀搜索算法优化极限学习机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现SSA-ELM麻雀搜索算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现SSA-ELM麻雀搜索算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基…

UnitTest笔记: 拓展库DDT的使用

DDT (Data-Drivers- Tests) 允许使用不同的测试数据运行同一个测试用例&#xff0c;展示为不同的测试用例。 第一步&#xff1a; pip安装 ddt 第二步&#xff1a; 创建test_baidu_ddt.py 1. 测试类要使用ddt 修饰 2. 不同形式的参数化&#xff1a; 列表&#xff0c;字典&a…

数据隐私与安全在大数据时代的挑战与应对

文章目录 数据隐私的挑战数据安全的挑战应对策略和方法1. 合规和监管2. 加密技术3. 匿名化和脱敏4. 安全意识培训5. 隐私保护技术 结论 &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&…

糟改押ong韵诗词,末三字改qiao ben zhong

题目给出诗词行的汉语拼音&#xff0c;糟改诗词押ong诗词行末三字“敲笨钟“。 (本笔记适合初通 Python 的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&#xff…

算法笔记/USACO Guide GOLD金组DP 1. Introduction to DP

USACO Guide中金组的内容分为一下六个章节 DP数学图论数据结构树一些附加主题 今天学习DP&#xff0c;以下内容&#xff1a; 初入DP背包DP图表中的路线最长递增序列状态压缩DP区间DP数位DP 初入DP Dynamic Programming (DP) is an important algorithmic technique in Comp…

Linux环境安装jdk

1.安装jdk 上传jdk.tar.gz;安装包在下载内容里可以直接下载tar -zxvf jdk.tar.gz;配置环境变量&#xff1a;vi /etc/profile&#xff1b;填入以下内容&#xff1b;退出编辑模式&#xff0c;保存&#xff1b;然后source /etc/profile使配置生效&#xff1b; export JAVA_HOME/d…

前端开发工程师有哪些细分领域?

前端开发工程师有哪些细分领域&#xff1f; 1. 用户界面&#xff08;UI&#xff1a;User Interface&#xff09;设计&#xff1a;专注于设计用户交互的界面&#xff0c;要有良好的审美和用户体验思维。1. 视觉设计2. 交互设计3. 一致性4. 响应式设计5. 原型与线框图6. 用户体验…

ElementUI表格show-overflow-tooltip设置宽度

1、show-overflow-tooltip 官方定义&#xff1a;默认情况下若内容过多会折行显示&#xff0c;若需要单行显示可以使用show-overflow-tooltip属性&#xff0c;它接受一个Boolean&#xff0c;为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。 也就是说使用ElementU…

ThreadLocal存放当前用户

用户信息必须由后端获取&#xff0c;不能通过前端传入的id是不可信的&#xff0c;&#xff0c;可能会出现越权的问题&#xff0c;&#xff0c;&#xff0c;怎么通过后端获取当前登录用户&#xff0c;&#xff0c;&#xff0c; 就需要将User 和 当前线程绑定在一起&#xff0c;&…

OpenCV + CLion在windows环境下使用CMake编译, 出现Mutex相关的错误的解决办法

最近在windows下面用cmake编译OpenCV的项目代码,但是一直碰到找不到mutex的问题&#xff0c;百思不得其解, Executing task: g -g -o bin/debug.exe src/main.cppC:\MinGW\lib\opencv\build\include/opencv2/core/utility.hpp:697:14: error: recursive_mutex in namespace st…

uniapp返回上一页并刷新

在uniapp中&#xff0c;经常会有返回上一页的情况&#xff0c;官方提供有 uni.navigateBack 这个api来实现效果&#xff0c;但是此方法返回到上一页之后页面并不会更新&#xff08;刷新&#xff09;。 例如有这样一个场景&#xff1a;从地址列表页点击添加按钮进入添加地址页面…

MySQL详细安装与配置

免安装版的Mysql MySQL关是一种关系数据库管理系统&#xff0c;所使用的 SQL 语言是用于访问数据库的最常用的 标准化语言&#xff0c;其特点为体积小、速度快、总体拥有成本低&#xff0c;尤其是开放源码这一特点&#xff0c;在 Web 应用方面 MySQL 是最好的 RDBMS(Relation…

带你启用window10专业版系统自带的远程桌面

启用window10专业版系统自带的远程桌面 文章目录 启用window10专业版系统自带的远程桌面前言1.找到远程桌面的开关2. 找到“应用”项目3. 打开需要远程操作的电脑远程桌面功能 总结 前言 Windows操作系统作为应用最广泛的个人电脑操作系统&#xff0c;在我们身边几乎随处可见。…

React性能优化之memo缓存函数

React是一个非常流行的前端框架&#xff0c;但是在处理大型应用程序时&#xff0c;性能可能会成为一个问题。为了解决这个问题&#xff0c;React提供了一个称为memo的功能&#xff0c;它可以缓存函数并避免不必要的重新渲染。 memo是React中的一个高阶组件&#xff08;HOC&…