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

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.kler.cn/news/312600.html

相关文章:

  • Kubernetes故障排除全面指南
  • Day27_0.1基础学习MATLAB学习小技巧总结(27)——曲线拟合函数
  • Unsupervised Domain Adaptation by Backpropagation
  • 【每日刷题】Day127
  • Scrapy爬虫框架 Spider Middleware 爬虫页中间件
  • 【软件设计】常用设计模式--观察者模式
  • 【小白向】Google Play日区如何支付?Google Play日区怎么转?Google Play日区账号支付教程
  • MongoDB的详细安装教程
  • SpringBoot 消息队列RabbitMQ 消息确认机制确保消息发送成功和失败 生产者确认
  • 普元DWS - Linux下安装DWS标准版
  • AUTOSAR_EXP_ARAComAPI的5章笔记(8)
  • Linux ubuntu debian系统安装UFW防火墙图形化工具GUFW
  • docker- No space left on device
  • 去耦合的一些建议
  • 基于YOLOv5s的无人机航拍输电线瓷瓶检测(附数据集与操作步骤)
  • CVPT: Cross-Attention help Visual Prompt Tuning adapt visual task
  • 云原生-Quarkus
  • 基于Benes网络的SIMD同态密文任意重排
  • HarmonyOS NEXT应用开发案例实践总结合集
  • 【C++笔记】类和对象的深入理解(三)
  • 练习题 - Django 4.x Overviewses 框架概述
  • 1. TypeScript基本语法
  • LangChain 和 Elasticsearch 加速构建 AI 检索代理
  • 练习题 - Django 4.x Models Relationship fields 字段关联关
  • 等保测评中的关键技术挑战与应对策略
  • three.js shader 实现天空中白云
  • 用 Docker 部署 Seafile 社区版
  • C++学习指南(六)----list
  • 【docker】阿里云使用docker,2024各种采坑
  • 【笔记】扩散模型(八):DALL-E 2 (unCLIP) 论文解读与代码实现