Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

目录

前言

computed

watch

watch侦听ref数据

ref简单数据类型

ref复杂数据类型

watch侦听reactive数据


前言

本文介绍在vue3中的computed计算属性和watch侦听属性。介绍watch如何侦听被ref和reactive包裹的数据

computed

在vue3中,计算属性computed也是组合式api,也就是说要先引入,再在setup中使用

语法

完整:

let 自定义 = computed({

        get(){

                return

        },

        set(val){

                

        }

})

当不使用set时,

可以简写

let 自定义 = computed(()=>{

        return

})

如下

反转案例

watch

watch侦听属性也是组合式api,所以也需要先引入然后再setup中使用

watch侦听ref数据

ref简单数据类型

watch(监听的属性,(newValue,oldValue)=>{})

ref复杂数据类型

watch(.value,(newValue,oldValue)=>{})

由这篇文章可知,ref包裹复杂数据类型底层使用的是object.defineProperty+Proxy。.value代表的就是Proxy代理对象

这种方法获取不到oldValue

1

使用

watch(复杂数据对象,(newValue,oldValue)=>{})

这种方法是无法监听对象里面的内容的

因为直接监听复杂数据对象,默认deep是false的

要手动开启deep:true

watch(复杂数据对象,(newValue,oldValue)=>{},{deep:true})

watch侦听reactive数据

watch(复杂数据对象,(newValue,oldValue)=>{})

获取不到旧值

被reactive包裹的复杂数据类型可以直接监视复杂数据对象。但是,这种方法默认是开启了深度监视,是关不掉的。deep:false是无效的。所以,复杂对象里面任意数据发生改变都会被监视

watch(()=>复杂数据对象.要被监视的属性,(newValue,oldValue)=>{})

这样就可以监视单一的属性

可以获取到旧值

如下图,宽度增加是没有触发监听的,只有高度增加时才会触发监听。

数组的形式监听多个属性

watch([ ()=>复杂数据对象.要被监视的属性,()=>复杂数据对象.要被监视的属性],(newValue,oldValue)=>{})

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言天花板——指针(经典题目)

指针我们已经学习的差不多了,今天我来给大家分享几个经典的题目,来让我们相互学习🏎️🏎️🏎️ int main() {int a[4] { 1, 2, 3, 4 };int* ptr1 (int*)(&a 1);int* ptr2 (int*)((int)a 1);printf("%x,%…

Java重修第六天—面向对象3

通过学习本篇文章可以掌握如下知识 1、多态; 2、抽象类; 3、接口。 之前已经学过了继承,static等基础知识,这篇文章我们就开始深入了解面向对象多态、抽象类和接口的学习。 多态 多态是在继承/实现情况下的一种现象&#xf…

随笔03 笔记整理

图源:文心一言 关于我的考研与信息安全类博文整理~🥝🥝 第1版:整理考研类博文~🧩🧩 第2版:提前列出博文链接,以便小伙伴查阅~🧩🧩 第3版:整理We…

学习记录-自动驾驶与机器人中的SLAM技术

以下所有内容均为高翔大神所注的《自动驾驶与机器人中的SLAM技术》中的内容 融合导航 1. EKF和优化的关系 2. 组合导航eskf中的预测部分&#xff0c;主要是F矩阵的构建 template <typename S> bool ESKF<S>::Predict(const IMU& imu) {assert(imu.timestamp…

基于杂交PSO算法的风光储微网日前优化调度(MATLAB实现)

微网中包含&#xff1a;风电、光伏、储能、微型燃气轮机&#xff0c;以最小化电网购电成本、光伏风机的维护成本、蓄电池充放电维护成本、燃气轮机运行成本及污染气体治理成本为目标&#xff0c;综合考虑&#xff1a;功率平衡约束、燃气轮机爬坡约束、电网交换功率约束、储能装…

Elasticsearch_8.11.4_kibana_8.11.4_metricbeat_8.11.4安装及本地部署_ELK日志部署

文章目录 Elasticsearch_8.11.4_kibana_8.11.4_metricbeat_8.11.4安装及本地部署_ELK日志部署分布式引擎Elasticsearch_8.11.4安装及本地部署系统环境要求1 Windows 安装 Elasticsearch下载完成后进行解压,进入 bin 目录,找到elasticsearch.bat脚本文件执行一键启动.启动都选允…

【Python学习】Python学习15-模块

目录 【Python学习】Python学习15-模块 前言创建语法引入模块from…import 语句from…import* 语句搜索路径PYTHONPATH 变量-*- coding: UTF-8 -*-导入模块现在可以调用模块里包含的函数了PYTHONPATH 变量命名空间和作用域dir()函数globals() 和 locals() 函数reload() 函数Py…

ROS2学习笔记一:安装及测试

目录 前言 1 ROS2安装与卸载 1.1 安装虚拟机 1.2 ROS2 humble安装 2 ROS2测试 2.1 topic测试 2.2 小海龟测试 2.3 RQT可视化 2.4 占用空间 前言 ROS2的前身是ROS&#xff0c;ROS即机器人操作系统&#xff08;Robot Operating System&#xff09;,ROS为了“提高机器人…

原生js实现拖拽效果

<!DOCTYPE html> <html> <head> <style> #mydiv { width: 200px; height: 200px; background-color: red; position: absolute; cursor: move; } </style> | </head> <body> <div id"mydiv">拖拽我…

基于java web的机票管理系统设计与实现设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

机器学习扩散模型简介

一、说明 扩散模型的迅速崛起是过去几年机器学习领域最大的发展之一。在这本易于理解的指南中了解您需要了解的有关扩散模型的所有信息。 扩散模型是生成模型&#xff0c;在过去几年中越来越受欢迎&#xff0c;这是有充分理由的。仅在 2020 年代发布的几篇开创性论文就向世界…

socket.io分房间交流

基本详情看这里 Socket.IO 是一个库,可以在客户端和服务器之间实现 低延迟, 双向 和 基于事件的 通信. 效果展示 安装依赖 // 后端插件安装 npm i socket.io -S // 前端插件安装 npm i socket.io-client -S 前端搭建及逻辑 <script setup> import { ref, onMounted…

机器学习 | 卷积神经网络

机器学习 | 卷积神经网络 实验目的 采用任意一种课程中介绍过的或者其它卷积神经网络模型&#xff08;例如LeNet-5、AlexNet等&#xff09;用于解决某种媒体类型的模式识别问题。 实验内容 卷积神经网络可以基于现有框架如TensorFlow、Pytorch或者Mindspore等构建&#xff…

Vue2脚手架配置教程IDEA配置VUE

5.12.3 Vue Cli 文档地址: https://cli.vuejs.org/zh/ IDEA 打开项目&#xff0c;运行项目

React 原理

函数式编程 纯函数 reducer 必须是一个纯函数&#xff0c;即没有副作用的函数&#xff0c;不修改输入值&#xff0c;相同的输入一定会有相同的输出不可变值 state 必须是不可变值&#xff0c;否则在 shouldComponentUpdate 中无法拿到更新前的值&#xff0c;无法做性能优化操作…

Linux网络服务部署yum仓库

目录 一、网络文件 1.1.存储类型 1.2.FTP 文件传输协议 1.3.传输模式 二、内网搭建yum仓库 一、网络文件 1.1.存储类型 直连式存储&#xff1a;Direct-Attached Storage&#xff0c;简称DAS 存储区域网络&#xff1a;Storage Area Network&#xff0c;简称SAN&#xff0…

服务拆分及远程调用

分布式架构都离不开服务的拆分&#xff0c;微服务也是一样。 1.微服务拆分 不同微服务&#xff0c;不要重复开发相同业务 微服务数据独立&#xff0c;不要访问其它微服务的数据库 微服务可以将自己的业务暴露为接口&#xff0c;供其它微服务调用 2.远程调用 以前时&#xf…

Halcon提取亚像素轮廓edges_sub_pix算子

Halcon提取亚像素轮廓edges_sub_pix算子 最常用的提取亚像素轮廓的算子是edges_sub_pix算子&#xff0c;该算子同样提供了大量的提取方法&#xff0c;只需要在Filter 参数中设置方法的名字&#xff0c;就可以完成边缘的提取。该算子的输入是灰度图像&#xff0c;输出是XLD轮廓…

BurpSuite超详细安装教程-功能概述-配置-使用教程---(附下载链接)

一、介绍 BurpSuite是渗透测试、漏洞挖掘以及Web应用程序测试的最佳工具之一&#xff0c;是一款用于攻击web 应用程序的集成攻击测试平台&#xff0c;可以进行抓包、重放、爆破&#xff0c;包含许多工具&#xff0c;能处理对应的HTTP消息、持久性、认证、代理、日志、警报。 …

使用scipy处理图片——滚动图片

大纲 常规模式constant和grid-constant 交换模式wrap和grid-wrap 镜像reflect、mirror和grid-mirror 最近值nearest 代码 在《使用numpy处理图片——滚动图片》一文中&#xff0c;我们介绍了numpy的roll方法&#xff0c;它只能让超出区域的元素回到被移动的区域中&#xff0c;如…