vue父子组件响应式同步需父组件用ref/reactive定义数据、子组件通过props访问；解构props或传普通变量会断连，静态绑定无响应性。

Vue 的响应式数据在父子组件间能自动保持同步，前提是父组件传的是真正的响应式数据，子组件用对方式接收。

父组件必须传响应式数据

如果父组件用普通变量（比如 let msg = "hello"）传给子组件，子组件不会随它变化。必须用 ref 或 reactive 包裹：

• Vue 3 中推荐用 ref： const msg = ref("hello")，然后 <child :msg="msg"></child>
• 传递对象时，用 reactive 或嵌套的 ref，否则内部属性修改不会触发更新
• 静态值如 :title="'首页'" 没有响应性，改了也不会重渲染

子组件接收 props 是只读但响应式的

Vue 3 中 defineProps 返回的对象是只读代理，但它是响应式的：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 可以直接在模板里写 {{ msg }}，父组件 msg.value = "new" 会立刻更新显示
• 不能直接赋值，比如 props.msg = "xxx" 会报错
• 想在子组件内修改，应复制一份本地状态：const localMsg = ref(props.msg)

深层响应：对象和数组内部变化也生效

只要父组件传的是响应式对象，子组件就能监听到它的深层变化：

• 父组件：const user = reactive({ name: "Alice", age: 25 })，传 <child :user="user"></child>
• 子组件中 props.user.name = "Bob"（不推荐直接改），或父组件改，子组件模板中 {{ user.name }} 会自动更新
• 数组 push、pop 等方法同样触发更新，因为 reactive 已代理整个结构

避免常见断连：为什么 props 不更新？

多数“没反应”问题出在数据源头或绑定方式：

• 父组件用了 let data = ... 而不是 ref(...) —— 改了也不触发更新
• 子组件把 props 当普通变量解构：const { msg } = props，这会丢失响应性，应始终通过 props.msg 访问
• 异步获取数据后没用 ref 包裹，比如 data = await api.get() 后直接传，需改成 data.value = await api.get()

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！