为何Vue watch监听Vuetify动态组件props时，直接传对象失效函数返回正常？

这个现象的核心是Vue的响应式机制与v-bind的更新逻辑导致的，具体分两种情况说明：

1. 直接赋值tab.props的问题 #

当你直接执行：

props = { mboDetails: this.mboDetails, selectedTab:this.selectedTab }

这个操作只是一次性将当前时刻的响应式数据值存入了普通对象。后续即使this.selectedTab或this.mboDetails变化，tab.props内部的属性不会自动更新——因为这个对象本身不是响应式的，也没有和父组件的响应式数据建立持续的绑定关系。

Vue的v-bind在绑定一个固定对象时，只有当这个对象的引用发生变化（比如被重新赋值为新对象）时，才会触发子组件的props更新。而这里tab.props的引用从未改变，内部属性的变化又不属于Vue的响应式追踪范围，所以子组件接收的selectedTab一直是初始值，watch自然检测不到变化。

2. 函数返回props的工作原理 #

使用getTabProps(tab.name)时，每次父组件因响应式数据变化（比如this.selectedTab改变）触发重新渲染时，这个函数都会被调用，返回一个全新的对象引用，并且对象内的属性直接取当前最新的响应式数据值。

此时v-bind会对比新旧props对象：

• 发现对象引用更新，或者内部属性值与之前不同
• 触发子组件的props更新，子组件的watch就能捕获到selectedTab的变化

额外补充：让第一种方式生效的改进方案 #

如果想保留直接赋值的形式，需要让tab.props成为响应式对象，并且确保属性更新能被追踪：

• 用Vue的reactive()函数将tab.props转为响应式对象
• 或者使用计算属性返回props对象，确保每次响应式数据变化时生成新的对象：

computed: {
  tabProps() {
    return {
      mboDetails: this.mboDetails,
      selectedTab: this.selectedTab
    }
  }
}

然后在模板中使用v-bind="tabProps"即可。

内容的提问来源于stack exchange，提问作者KSDev