vue3 watch 无法监测父组件props的问题

问题概述

工作中遇到一个问题,子组件需要根据父组件传递的props做出相应的逻辑处理,但是watch监听始终拦截父组件对于props的改变。子组件代码如下:

watch( props.tagsTableData,(val)=>{
  isFirst = true
  currentPage.value = 1
  tableData.value = []
  tableDataTotal.value = []
  nextTick(() => {
    handleCurrentChange(1)
    console.log(currentPage.value, 'currentPage--val')
    getTableData()
  })
},{deep:true,})

不论是增加deep还是增加immetate都不起作用。翻阅了大量文章,最后终于找到了原因。原来是watch监听对象属性变化时,不能这么写,要把watch的第一个参数写成函数形式,否则监听不到。

//修改后的代码
 watch( () => props.tagsTableData,(val)=>{
  isFirst = true
  currentPage.value = 1
  tableData.value = []
  tableDataTotal.value = []
  nextTick(() => {
    handleCurrentChange(1)
    console.log(currentPage.value, 'currentPage--val')
    getTableData()
  })
},{deep:true,})

先记录一下,后续探讨问题的深层原因。

### 如何在 Vue 中使用 Watch 监听 Props 变化 在 Vue 组件中,`watch` 提供了一种有效的方法来监听来自父组件传递的 `props` 的变化。当 `props` 发生改变时,可以通过定义相应的 watcher 来触发指定的操作。 对于监听单一 `prop` 的情况,在 `<script setup>` 或选项式 API 下都可以实现: #### 单一 Prop 监听示例 ```javascript <script setup> import { watch } from &#39;vue&#39; // 定义接收自父级组件传入的数据 const props = defineProps({ count: Number }) // 创建一个监视器用于监控 count 属性的变化 watch( () => props.count, (newValue, oldValue) => { console.log(`count changed from ${oldValue} to ${newValue}`) } ) </script> ``` 此代码片段展示了如何创建一个简单的 watcher 来跟踪名为 `count` 的 prop 的任何更新,并打印旧值和新值到控制台[^3]。 除了基本的功能外,还可以配置额外参数以增强 `watch` 行为: - **immediate**: 如果设置为 `true`,则会在初始化阶段立即执行一次回调函数。 - **deep**: 对于对象或数组类型的 `props`,如果希望捕获内部深层结构的变化,则需开启深监测模式。 下面是一个更复杂的例子,包含了上述两个特性: #### 复杂 Prop 监听示例(带 Immediate 和 Deep) ```typescript <template> <!-- ... --> </template> <script lang="ts"> import { ref, watch } from &#39;vue&#39; interface MyComponentProps { user?: User; } export default { name: "MyComponent", props: ["user"], setup(props: MyComponentProps){ let localUserState = ref<User | undefined>(undefined); // 使用 immediate 参数使侦听器立刻运行一次;使用 deep 参数启用深度比较 watch(() => props.user, (newVal, oldVal)=>{ if(newVal !== null && newVal !== undefined){ localUserState.value = {...newVal}; } }, { immediate: true, deep: true }); return{ localUserState }; } } </script> ``` 这段 TypeScript 编写的代码演示了怎样利用 `immediate` 和 `deep` 配置项去处理复杂类型(如对象)作为 `props` 输入的情况[^5]。 需要注意的是,虽然可以直接访问并修改局部变量或其他状态,但是不应该尝试直接更改接收到的 `props`,因为它们是从外部注入且只读的。应该考虑将新的逻辑结果存储在一个独立的状态容器里或者通知给其他部分。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值