props 与计算属性共享同一响应式系统，props 更新会自动触发依赖它的计算属性重新求值，形成父组件→子组件props→computed的响应链；需避免解构破坏响应性、静态传参及未启用deep监听等断链陷阱。
Vue.js 中，Props 的监听与计算属性的响应式链不是独立运作的两套机制，而是同一响应式系统下的协作关系。关键在于：Props 本身是只读响应式代理，而计算属性可基于 Props 构建派生逻辑；当 Props 更新时，依赖它的计算属性会自动重新求值，形成一条从父组件 → 子组件 props → 子组件 computed 的响应式链条。
Props 本身支持直接监听
子组件中可以直接用 watch 监听传入的 props（包括 ref、reactive 对象或计算属性），无需额外包装：
- 监听基本类型 prop（如
title）：值变化即触发回调 - 监听对象或数组 prop：默认只响应引用变化；如需监听内部属性变动，需配合
deep: true - 监听计算属性作为 prop（如
:user="computedUser"）：只要computedUser依赖项更新，watch 就会响应
计算属性天然承接 Props 的响应性
只要计算属性的 getter 中访问了 props，它就会自动建立响应依赖：
- 例如：
computed: { fullName() { return this.user.name + ' ' + this.user.surname } }，当user是 reactive 对象且其name或surname变更时，fullName会重新计算 - 注意：若 props 是普通对象（非 reactive/ref），则无法触发更新——计算属性的响应性依赖于底层数据是否被 Vue 的响应式系统接管
- 计算属性具备缓存特性，多次读取不会重复执行 getter，仅在依赖变更时才刷新
避免常见断链陷阱
响应式链容易在以下环节中断，需主动排查：
-
静态字面量传参：如
:count="100"，这不是响应式数据，后续任何变化都不会触发子组件更新 -
解构破坏响应性：在 setup 中写
const { name, age } = props会丢失响应链接，应改用toRefs(props)或直接访问props.name -
watch 没启用 deep：监听对象 prop 时未设
deep: true，内部属性修改将静默忽略 - 计算属性依赖非响应源：比如从 props 解构后赋给普通变量再使用，该变量不再受响应式系统追踪
组合式 API 下的推荐写法
在 setup() 中保持响应链清晰更直观：
- 用
defineProps声明 props，保留响应式代理结构 - 计算属性用
computed(() => props.xxx)，显式声明依赖 - 监听用
watch(() => props.xxx, ...)或watch(props, ..., { deep: true })，语义明确且安全 - 如需对 props 做预处理，优先封装为 computed，而非在 watch 中手动同步状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
