vue3、watch、ref对象、reactive对象、proxy、子组件监听、恩恩怨怨

最新推荐文章于 2024-08-13 09:39:02 发布
最新推荐文章于 2024-08-13 09:39:02 发布
阅读量2.5k 收藏 3
点赞数 1
分类专栏： vue3踩坑 文章标签： javascript typescript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42390357/article/details/123457435
版权
本文详细探讨了Vue3中watch如何监听ref和reactive对象的问题，包括直接监听ref对象的响应性挑战、使用getter函数的形式、子组件监听父组件的ref变化、以及对reactive对象的深度监听。总结了watch的第一参数形式和reactive对象的特性。
摘要由CSDN通过智能技术生成

1、watch直接监听ref对象时的响应性问题

watch监听ref对象时的问题

2、watch监听ref对象的getter函数形式

3、子组件中监听父组件传过去的ref对象的变化

在这里插入图片描述

4、watch监听父组件传给子组件的基本ref对象

在这里插入图片描述

5、watch监听子组件中reactive（proxy对象）

在这里插入图片描述

总结：

一、watch的第一个参数只有四种形式：

  1. ref对象
  2. reactive对象。
最低0.47元/天 解锁文章
Fish10_01
关注
专栏目录
VUE3-watch监视ref数据的说明（9）
述安的博客
03-07 1709
<template> <h2>当前求和为：{{ sum }}</h2> <button @click="sum++">点我+1</button> <hr> <h2>当前的信息为：{{ msg }}</h2> <button @click="msg+='！'">修改信息</button> <hr> <h2>姓名：{{ person.na
vue3中reactive对比ref watch watchEffect函数
夜空孤狼啸的博客
11-12 892
3. ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）4. reactive通过Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据6. ref定义数据：操作数据需要 .value ,读取数据时模板中直接读取不需要 .value7. reactive 定义的数据： 操作数据和读取数据均不需要 .value。
vue3 watch 的多种场景用法（ref，reactive，getter函数，数组）
最新发布
Lyy_ID的博客
08-13 1170
watch的第一个参数响应式属性，不管是单个基本数据，还是整个对象，统一写成函数返回形式() => person.age 或 () => person，person无论是ref或者reactive定义的都可以适用，当要同时监听多个数据的时候，也是采用数组包函数返回形式。回调函数的两个参数，前者永远是新值，后者永远是旧值，根据监听的数据是单个还是多个决定参数是值(newName,oldName) => {具体逻辑}还是数组。
VUE3-watch侦听ref包裹对象
MCCLS的博客
07-19 799
watch侦听是侦听响应式对象，即RefImpl对象、Proxy对象，如果不为响应式则需要使用函数形式 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9QgtFg3Q-1689761730559)(https://gitee.com/zhang_luwei/image-resources/raw/master/image/1689647918250.jpg)]VUE3、ref、RefImpl、Proxy、watch
【vue3】wacth监听，监听ref定义的数据，监听reactive定义的数据，详解踩坑点
花椒和蕊的博客
10-01 1288
【vue3】wacth监听，监听ref定义的数据，监听reactive定义的数据，详解踩坑点
vue3 watch属性的详细笔记
Langlous2000817的博客
08-24 487
问题1：此处无法正确获得oldValue，解决办法将需要oldValue的属性值，创建一个单独的ref响应式数据。情况4:监视reactive所定义的一个响应式数据中的一个属性,情况1：watch监听单个数据 情况2：watch监听多个数据。情况3：监视reactive函数定义的一个响应式数据。二、watch监听reactive定义的数据。问题2：强制开启了深度监视，deep配置无效。一、watch监听ref定义的数据。问题1:监听数据的形式发生了变化。
vue3.0组件监听异步数据，watch与reactive 的应用, watch与computed, 还有ref的使用
versionli的博客
01-07 5200
vue3.0子组件监听父组件传过来的异步数据，watch与reactive 的应用, watch与computed, 还有ref与wactch的使用
Ref Effect baseHandler reactive Proxy Vue 3
01-04
在 Vue 3 中，引入了 `ref` 和 `reactive` 两个核心 API，它们构建在 `Proxy` 之上，为开发者提供了更直观的响应式声明方式。`ref` 主要用于创建可响应的值，它可以是一个基本类型或者一个对象。当你对 `ref` 创建的...
vue3.0 watch监听对象不生效
wz_cmyc的博客
10-10 2610
vue3 watch监听对象不生效
vue3中ref的作用及ref和reactive之间的转化
YY的博客
12-12 3381
vue3中ref的作用
vue3之watch
06-06 6885
watch：接受3个参数参数1：监视的数据源，可以是一个ref、reactive、函数参数2：回调函数 (新值, 旧值) => {}参数3：额外配置是一个对象 {deep: trrue, immediate: true}, 参数一是深度侦听，参数二是立即侦听（页面一刷新就会监听）
Vue3学习：监视（watch）reactive定义的数据
weixin_47295886的博客
03-19 931
监视reactive所定义的一个响应式数据的全部属性——无法正确的获取oldValue（传递ref里面是对象，走的是reactive .value）——强制开启了深度监视（deep配置无效）-不管嵌套有多深。特殊情况——监视reactive定义的对象中的某个属性——依然是对象（如果是字符串没必要了）——里面需要加深度监视否则无效,{deep:true})监视reactive所定义的一个响应式数据中的某些属性——数组。监视reactive所定义的一个响应式数据中的某个属性。reactive——对象。
vue3中的侦听器 watch使用
weixin_43799793的博客
09-04 310
深度监听， deep 或 传入一个响应式对象。vue3中的侦听器 watch使用。
父组件监听子组件数据_react中父组件onclick调用子组件的方法
weixin_34333047的博客
01-12 2393
子组件：child.jsimport react,{Component} from 'react' export default class Child extends Component{ constructor(props){ super(props) this.state = { //声明变量 } if(props.onRef){//如果父组件传来该方...
vue3的watch属性
larea的博客
04-01 652
观察reactive定义的一个属性。观察reactive定义的多个属性。观察ref定义的一个属性。观察ref定义的多个属性。
父传子中 watch 监听和 ref 传值的用法和区别
YWW_ABC的博客
10-31 1452
父传子中 watch 监听和 ref 传值的用法和区别（应用场景：点击编辑按钮的时候子组件（弹框）中回显父组件传过来的值）
监听watch中，ref()和reactive()响应式数据的区别
2301_76979068的博客
07-12 514
组合式API中监听不同响应式数据的区别。ref()和reactive()
vue3watch监听reactive
05-26
Vue 3 中的 watch API 用于监听响应式数据变化，并在数据变化时执行一些操作。如果你想监听一个 reactive 对象的变化，可以使用 watchEffect 或者 watch API。下面是一个示例： ```javascript import { reactive, watchEffect } from 'vue'; const state = reactive({ count: 0, }); watchEffect(() => { console.log(state.count); }); ``` 在上面的代码中，我们创建了一个响应式对象 state，然后使用 watchEffect 监听 count 属性的变化，并在控制台输出 count 的值。 如果你想对变化进行更精细的控制，可以使用 watch API。下面是一个示例： ```javascript import { reactive, watch } from 'vue'; const state = reactive({ count: 0, }); watch( () => state.count, (newVal, oldVal) => { console.log(`count 变为 ${newVal}，原来的值为 ${oldVal}`); } ); ``` 在上面的代码中，我们使用 watch 监听 count 属性的变化，并在控制台输出新值和旧值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值