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

vue3 监听props 的变化

再三说明 仅仅个人学习用,不误导别人
我觉得props 会创建对应的属性,去接受这些值,比如传递一个ref的基本值 age
props.age = age.value
传递一个ref的引用值 person
props.person= person.value
传递一个reactive的引用值 person
props.person= person

最开始时候,props指向了一个响应式的reactive person,如果我们手动将person = {} 整个替换掉,是不影响原来指向的值的(setup只在初始化时执行一次,所有一开始props指向的是一个响应式的person,而当前改变的person 并不影响,props当中的person 所以也无法监听)

1、父组件使用reactive 接收数据

let person = reactive({age: 21,name: 'test',info: {a: 1}
});

person 和 info 以及prop都是一个reactive对象,都可以作为watch第一个参数

const props = defineProps({person: {age: Number,name: String,info: {a: Number}}
});可以监听到info 里边某个属性变化
watch(person.info, (value) => {console.log(value);
})
整个info 被替换掉也可以监听到
watch(() => person.info, (value) => {console.log(value);
})
整个person 替换掉 无法被监听,因为props当中的person 指向的是一个已经封装了的reactive对象
如果在父组件当中直接person = newValue props是无法监听到的

2、父组件使用ref 接收数据

let person = ref({age: 21,name: 'test',info: {a: 1}
});

将person.value = { } 整个替换

可以监听到
watch(props, (value) => {console.log(value);
})
无法监听
watch(props.person, (value) => {console.log(value);
})
可以监听到person 被整个替换掉
watch(() => props.person, (value) => {console.log(value);
})

做项目中,我将修改 或者 新增的表单组件分离出去了,每次新增或者修改时候需要给表单组件传递一个person 值,新增时候需要置空,修改时候需要赋予值

我们知道person = {}是没办法监听到的,所以采用

let person = ref({age: 21,name: 'test',info: {a: 1}
});const add= ()=>{person.value = {}
]const add= ()=>{Object.assign(person.value,{age:2,name:'test'})
]

监听变化

相关文章:

vue3 监听props 的变化

再三说明 仅仅个人学习用,不误导别人 我觉得props 会创建对应的属性,去接受这些值,比如传递一个ref的基本值 age props.age age.value 传递一个ref的引用值 person props.person person.value 传递一个reactive的引用值 person props.person…...

Docker容器

1、什么是docker,为什么要使用docker 有了docker,可以获取各种软件的镜像,将软件的镜像下载到linux中,基于这个镜像就能够去启动这个容器,这个容器就是这个镜像的完整运行环境,比如mysql、redis、nginx,还能秒级启动他…...

spring 请求等问题

1.post请求 /*** desc: (gateway主要接收前端请求 , 然后对请求的数据进行验证 , 验证之后请求反向代理到服务器 。*当请求 method 为 GET 时 , 可以顺利通过gateway 。 当请求 method 为 POST 时 , gateway则会报如下错误 。*jav…...

汽车制造行业,配电柜如何实施监控?

工业领域的生产过程依赖于高效、稳定的电力供应,而配电柜作为电力分配和控制的关键组件,其监控显得尤为重要。 配电柜监控通过实时监测、数据收集和远程控制,为工业企业提供了一种有效管理电能的手段,从而确保生产的连续性、安全性…...

stable diffusion实践操作-VAE

本文专门开一节写图生图相关的内容,在看之前,可以同步关注: stable diffusion实践操作 大部分底模有VAE,但是部分底模没有VAE,需要专门下载VAE才能使用。 最常用的VAE:vae-ft-mse-840000-ema-pruned 用来饱…...

《Flink学习笔记》——第一章 概念及背景

​ 什么是批处理和流处理,然后由传统数据处理架构为背景引出什么是有状态的流处理,为什么需要流处理,而什么又是有状态的流处理。进而再讲解流处理的发展和演变。而Flink作为新一代的流处理器,它有什么优势?它的相关背…...

顺序表链表OJ题(2)->【数据结构】

W...Y的主页 😊 代码仓库分享 💕 前言: 单链表的结构常常不完美,没有双向链表那么”优秀“,所以繁衍出很多OJ练习题。今天我们继续来look look数据结构习题。 下面就是OJ时间!!! …...

css3有哪些新特性?(包含哪些模块)

css3有哪些新特性?包含哪些模块?以下是整理的21个css3新特性: 1.新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)} 2.新增伪元素 ::before 和 ::after 3.弹性盒模型 display: flex; 4.多列布局 column-count: 5; 5.媒体查询 media (max-width:…...

【Grasshopper基础15】“右键菜单似乎不太对劲”

距离上一篇文章已经过去了挺久的,很长时间没有写GH基础部分的内容了,原因其一是本职工作太忙了,进度也有些落后,白天工作累成马,回家只想躺着;其二则是感觉GH基础系列基本上也介绍得差不多了,电…...

华为Mate60低调发布,你所不知道的高调真相?

华为Mate60 pro 这两天的劲爆新闻想必各位早已知晓,那就是华为Mate60真的来了!!!并且此款手机搭载了最新国产麒麟9000s芯片,该芯片重新定义了手机性能的巅峰。不仅在Geekbench测试中表现出色,还在实际应用…...

C++(18):命名空间

多个库将名字放置在全局命名空间中将引发命名空间污染。 命名空间可以用来防止名字冲突,它分割了全局命名空间,其中每个命名空间是一个作用域。通过在某个命名空间中定义库的名字,库的作者(以及用户)可以避免全局名字…...

K8S最新版本集群部署(v1.28) + 容器引擎Docker部署(上)

温故知新 📚第一章 前言📗背景📗目的📗总体方向 📚第二章 基本环境信息📗机器信息📗软件信息📗部署用户kubernetes 📚第三章 Kubernetes各组件部署📗安装kube…...

生产环境部署与协同开发 Git

目录 一、前言——Git概述 1.1 Git是什么 1.2 为什么要使用Git 什么是版本控制系统 1.3 Git和SVN对比 SVN集中式 Git分布式 1.4 Git工作流程 四个工作区域 工作流程 1.5 Git下载安装 1.6 环境配置 设置用户信息 查看配置信息 二、git基础 2.1 本地初始化仓库 ​编辑…...

Qt/C++编写视频监控系统80-远程回放视频流

一、前言 远程回放NVR或者服务器上的视频文件,一般有三种方式,第一种是调用厂家的SDK,这个功能最全,但是缺点明显就是每个厂家的设备都有自己的SDK,只兼容自家的设备,如果你的软件需要接入多个厂家的&…...

用于设计和分析具有恒定近心点半径的低推力螺旋轨迹研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...

MongoDB - 构造复杂查询条件执行查询

文章目录 1. 构造 keyword 的查询条件2. 构造 threatSubType 的查询条件3. 相应的实体类 /*** 查询白名单详情** param offset 第几页开始* param limit 每页显示的最大值* param keyword 模糊搜索值* param order 排序方式(升序/降序…...

如何从ChatGPT中获得最佳聊天对话效果

从了解ChatGPT工作原理开始,然后从互动中学习,这是一位AI研究员的建议。 人们利用ChatGPT来撰写文章、论文、生成文案和计算机代码,或者仅仅作为学习或研究工具。然而,大多数人不了解它的工作原理或它能做什么,所以他…...

深入浅出:手把手教你实现单链表

一、什么是链表 链表是一种链状数据结构。简单来说,要存储的数据在内存中分别独立存放,它们之间通过某种方式相互关联。 如果我们使用C语言来实现链表,需要声明一个结构体作为链表的结点,结点之间使用指针关联。 二、单向链表的结…...

vite 打包项目后访问显示空白页的问题,开发环境正常,生产环境无报错。

有没有可能, 你跟我遇到同样的问题 白屏的写法 const routes [{path: /,component: import(../views/index.vue),} ]正确的写法 const routes [{path: /,component: () > import(../views/index.vue),} ]有时候方向很重要,当在错误的方向上无脑冲…...

打造成功的砍价营销大解析,销量飙升

砍价活动是吸引顾客的一种有效方式,可以帮助提高销量和提升品牌知名度。在乔拓云平台上,我们提供了一套简单易用的工具,让您能够轻松地制作一个成功的砍价活动。下面,我将详细介绍具体步骤,让您能够轻松上手。 第一步&…...

vscode里如何用git

打开vs终端执行如下: 1 初始化 Git 仓库(如果尚未初始化) git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...