vue3.0 setup组合式监听props变化

最新推荐文章于 2025-10-14 10:50:30 发布
原创 最新推荐文章于 2025-10-14 10:50:30 发布 · 847 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js #组合模式

这篇文章介绍了如何在Vue组件中使用`watchEffect`钩子函数来监听`showDrawer`属性的变化，以便在状态改变时执行相应的逻辑。 
<script setup>
import { watchEffect } from 'vue';
const props = defineProps({
  showDrawer: {
    type: Boolean,
    defult: false,
  },
  dateType: {
    type: String,
  },
});
watchEffect(()=>{
   console.log('qqqqqq监听',props.showDrawer);
});
</script>

使用watchEffect 进行监听！！！！

hehe-呵呵
关注
Vue3 watch 侦听 props 的变化
weixin_45932157的博客
07-20 2305
vue3props监听
vue3 中如何监听 props 中的值的变化
qq_30193097的博客
01-23 2299
函数允许你观察一个或多个响应式数据源，并在这些数据源发生变化时执行回调函数。函数的回调会被调用，并且我们可以在新值和旧值之间进行操作。以下是一个示例，展示了如何在 Vue 3 中使用。的值，并将其存储在一个响应式的引用。中的值发生变化时执行特定的逻辑了。在 Vue 3 中，你可以使用。在这个示例中，我们首先从。
vue3 监听props 的变化
qq_41304029的博客
08-29 9386
我觉得props 会创建对应的属性，去接受这些值，比如传递一个ref的基本值 age传递一个ref的引用值 person传递一个reactive的引用值 person最开始时候，props指向了一个响应式的reactive person，如果我们手动将person = {} 整个替换掉，是不影响原来指向的值的（setup只在初始化时执行一次，所有一开始props指向的是一个响应式的person，而当前改变的person 并不影响，props当中的person 所以也无法监听）
vue3 watch怎么监听子组件props数据
最新发布
weixin_54569753的博客
10-14 748
监听源类型正确写法为什么？props的属性props是响应式对象，必须用 getter 函数来保持对其属性的响应式连接。reactive对象的属性同上，reactive对象的属性本身不是响应式的，需要 getter 函数来读取。ref对象ref本身是响应式对象，watch会自动监听其.value的变化。当你需要监听一个大的响应式对象（如propsreactive对象）内部的某个具体属性时，永远使用 getter 函数作为watch的第一个参数。这个设计虽然初看起来有点繁琐，但它非常强大和高效。
vue3 watch检测props传参的改变
weixin_43996255的博客
07-29 2510
的第三个参数（深度侦听）来侦听数组内部的变化。需要一个 getter 函数来访问响应式数据。2. 使用了箭头函数。
使用Vue Composition API / Vue 3监听props变化
qq_29715355的博客
04-28 802
在Vue 3中引入了Composition API，它提供了更灵活的方式来组织和复用组件逻辑。在开发过程中，经常需要监听组件props的变化以执行相应的操作，但Vue Composition API RFC参考站点和相关文档中并没有明确给出监听props变化的示例。
关于 vue3.0 实战项目 setup、 props、 reactive、ref
共同进步
10-31 860
vue3.0 setup 、props 、reactive、ref 亿点小知识1.diff算法的优化 增加了静态标记PatchFlag2.按需编译，体积比Vue2.x更小（Tree shaking）3.Compostion API: 组合API/注入API4.自定义渲染API（Custom Renderer API）5.数据监听方式变成了Proxy，消除了Object.defineProperty现有的限制。
Vue3.0组合式API：setup()函数
pan_junbiao的博客
09-14 1574
setup() 函数是一个新的组件选项，它是组件内部使用组合式 API 的入口。setup() 函数在组件实例创建之前，初始化 Prop 之后调用，而且setup() 函数是在 beforeCreate 钩子函数之前调用。setup() 函数可以返回一个对象或函数，对象的属性会合并到组件模板渲染的上下文中。setup() 函数可以接收两个可选的参数。第一个参数是响应式的 props 对象，第二个参数是一个上下文（context）对象。
【Vue3.0】Vue3.0组合式API的使用
lixiaosenlin的专栏
11-18 2232
前言 小伙伴们大家好。为期近半个月的TypeScript分享到这里就结束了，当然了前面关于TypeScript的分享都是一些表面的基础知识，想要更深入的了解还需要多学多练多看源码，本猴就不再做过多分享了。 从今天开始将为小伙伴们奉上关于Vue3.0相关知识的一些分享。vue3.0相较于vue2.0还是有很大的改变的，个人感觉vue3.0的用法更接近于react的了。至于一些语法指令啥的相较于2.0没有什么变化，这里就不再分享了。那么我们要学习的是3.0中的一些变化和新的技术点，下面我们先从vue3.0的使
Vue3.0组合式API：依赖注入provide和inject实现跨层组件的通信
pan_junbiao的博客
09-19 921
通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一棵巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦。provide 和 inject 可以帮助我们解决这一问题。一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。
精选资源
前端开发最新Vue3.0组合式api使用总结
08-04
Vue3.0作为一款现代化的前端框架，引入了许多新特性以提升开发效率和代码可维护性，其中最重要的改进之一就是组合式API。这篇总结将详细阐述Vue3.0中的组合式API，帮助开发者理解并掌握这些关键概念。 1. **setup...
解决vue 子组件修改父组件传来的props值报错问题
12-13
vue不推荐直接在子组件中修改父组件传来的props的值，会报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “result” (found in component ) <input v-model="currentSe
【vue3】在 vue3中， 组合式API，watch 如何监听props的数据
无言非影的博客
08-26 6586
在Vue 3的组合式API中，可以使用watch函数来监听props的数据变化。在Vue 3的组合式API中，watch函数的第一个参数可以是一个函数，也可以是一个响应式的数据源，比如ref、reactive等。
Vue3中使用setup监听props
yang295242361的博客
08-20 1132
在Vue 3中，setup函数是 Composition API 的一部分，用于定义组件的逻辑。与传统的选项式 API 相比，setup函数提供了一个更灵活的方式来组织和重用逻辑。当你想在setup函数中监听从父组件传递过来的props时，由于setup函数在组件实例创建之前被调用，因此你不能直接使用watch或watchEffect直接监听props，因为此时props还未被解析为响应式对象。
Vue3 子组件监听父组件数据变化的最佳实践
qq_41021889的博客
02-22 3660
在 Vue3 开发中，子组件处理父组件异步数据时，常因 watch 与 onMounted 的执行时序问题导致逻辑错误。本文提供三种解决方案： watch + immediate:true：适用于纯数据逻辑，立即响应初始数据及后续变化； onMounted 内嵌 watch：确保 DOM 就绪后操作，兼容初始化与数据更新； 父组件 v-if 控制渲染：数据就绪后再渲染子组件，避免未定义状态。 通过对比不同方案的执行时序（首次触发、数据更新、DOM 就绪），总结最佳实践：优先组合 watch 监听与 imm
Vue3 孙子组件监听父组件 props 参数变化 toRefs()
黄彪博客
07-24 1157
在hooks文件里我没办法监听到count1的变化，因为父组件传递到子组件，然后再从子组件转到hooks,丢失了响应式的功能。使用场景： 在Vue3中，父组件传递参数给子组件，子组件透传参数给孙子组件，使用的是 setup 语法。将响应式对象中的所有属性转换为单独的响应式数据，对象成为普通对象，并且值是关联的。加上toRefs可以重新变化响应式传到hooks上。
vue3实现父组件向子组件传值并监听props改变触发事件
Allen的博客
04-11 3657
【代码】vue3实现父组件向子组件传值并监听props改变触发事件。
VUE3 数据的侦听
热门推荐
m0_49515138的博客
12-09 1万+
所以要想定义的 watch 能够做出预期的行为，数据源必须具备响应性或者是一个 getter ，如果只是通过 let 定义一个普通变量，然后去改变这个变量的值，这样是无法侦听的。什么情况下可能会用到批量侦听呢？这个 API 的类型如下，使用的时候需要传入一个副作用函数（相当于 watch 的 侦听后的回调函数 ），也可以根据的实际情况传入一些可选的 侦听选项。来到这里，对 2 个必传的参数都有一定的了解了，先看看基础的用法，也就是日常最常编写的方案，只需要先关注前 2 个必传的参数。这句话是什么意思呢？
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值