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

Vue: watch5种监听情况

目录

一.watch的性质与作用

1.watch 的性质包括:

2.watch 常用于以下场景:

二.监视`ref`定义的基本类型数据

三.监视`ref`定义的对象类型数据

四.监视`reactive`定义的对象类型数据

五.监视`ref`或`reactive`定义的对象类型数据中的某个属性

六.监视上述的多个数据


一.watch的性质与作用

在 Vue 中,watch 的主要作用是监听数据的变化,并在数据变化时执行相应的回调函数,从而实现对数据变化的响应和处理。

1.watch 的性质包括:

  1. 可以监听 Vue 实例中的数据属性、计算属性、方法的返回值等。
  2. 能够获取数据变化前后的值,即新值和旧值,以便在回调函数中进行处理和比较。
  3. 支持深度监听,即可以监听对象内部属性的变化。
  4. 可以设置立即执行选项,在组件创建时立即执行一次回调函数。

2.watch 常用于以下场景:

  1. 当数据变化时执行异步操作,比如发送网络请求获取新的数据。
  2. 进行复杂的数据处理和逻辑判断。
  3. 同步更新其他相关的数据或状态。

二.监视`ref`定义的基本类型数据

直接写数据名即可,监视的是其`value`值的改变。

三.监视`ref`定义的对象类型数据

直接写数据名,监视的是对象的地址值,若想监视对象内部的数据,要手动开启深度监视。
1.若修改的是`ref`定义的对象中的属性,`newValue` 和 `oldValue` 都是新值,因为它们是同一个对象。
2.若修改整个`ref`定义的对象,`newValue` 是新值, `oldValue` 是旧值,因为不是同一个对象了。

四.监视`reactive`定义的对象类型数据

五.监视`ref`或`reactive`定义的对象类型数据中的某个属性

1. 若该属性值不是对象类型,需要写成函数形式。
2. 若该属性值是依然是对象类型,可直接编,也可写成函数,建议写成函数。

结论:监视的要是对象里的属性,那么最好写函数式,注意点:若是对象监视的是地址值,需要关注对象内部,需要手动开启深度监视。


六.监视上述的多个数据

http://www.lryc.cn/news/438266.html

相关文章:

  • Android 车联网——汽车系统介绍(附2)
  • C++ 链表
  • 中国初创公司数量下降了98%
  • 【SSRF漏洞】——http协议常见绕过
  • [网络][CISCO]CISCO_华为网络设备端口镜像配置
  • 第二十五章 添加数字签名
  • GHOST重装后DEF盘数据救援指南
  • 使用blender快速制作metahuman面部以及身体绑定教程
  • OpenHarmony鸿蒙( Beta5.0)智能窗户通风设备开发详解
  • pandas 将多条记录整合成一条记录,每条记录的year和month字段组成新的字段名
  • C# 中的多线程同步:原子变量、原子操作、内存顺序和可见性
  • 视图(mysql)
  • elementui组件el-upload实现批量文件上传
  • 【JAVA入门】Day45 - 压缩流 / 解压缩流
  • Qt_自定义信号
  • 【运维方案】某系统运维需求方案参考(doc全原件2024)
  • Linux环境使用Git同步教程
  • c++临时对象导致的生命周期问题
  • CSP-J 算法基础 深度优先搜索
  • LeetCode题练习与总结:基本计算器 Ⅱ--227
  • Elasticsearch基础(七):Logstash如何开启死信队列
  • c语言--力扣简单题目(链表的中间节点)讲解
  • 【STM32 Blue Pill编程】-定时器计数模式
  • 【例题】lanqiao1331 二进制中 1 的个数
  • 【论文解读】图像序列识别:CRNN技术在场景文本识别中的应用与突破(附论文地址)
  • Vue3+CesiumJS相机定位camera
  • turbo译码算法MAX, MAX_SCALE and MAX_STAR的比较
  • 关于HarmonyOS的学习
  • 【雅特力AT32】搭建模板工程及GPIO点灯操作
  • 实战千问2大模型第三天——Qwen2-VL-7B(多模态)视频检测和批处理代码测试