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,})

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