vue的响应式数据即组件状态本身，无需映射：data、ref、reactive直接被响应式系统接管，读写触发依赖收集与自动更新；无静态映射表，仅靠细粒度依赖图实现精准更新。
Vue 的响应式数据和组件状态之间不是“映射”关系，而是同一对象的响应式封装。data 里的属性、setup 中用 ref/reactive 声明的状态，本质上就是组件的状态本身——它们被 Vue 的响应式系统接管后，任何读写操作都会触发依赖追踪与自动更新。
响应式状态即组件状态
在 Vue 组件中，所谓“状态”指的就是可被 Vue 监听、能驱动视图变化的数据。它不经过额外映射层，而是直接参与响应式系统：
- Options API 中，
data()返回的对象会被 Vue 递归劫持（Vue 2 用Object.defineProperty，Vue 3 用Proxy），每个属性都具备 getter/setter，读取时收集依赖，修改时通知更新 - Composition API 中，
ref()和reactive()创建的对象本身就是响应式状态，无需手动绑定到组件实例；模板中访问count.value或state.count，底层会自动解包并建立依赖关系 - 组件渲染函数或模板中的表达式（如
{{ count }}、v-if="loading"）在求值过程中，会触发对应响应式属性的 getter，从而将当前组件的渲染 watcher（Vue 2）或 effect（Vue 3）注册为该属性的依赖
没有中间映射表，只有依赖图
Vue 不维护一份“数据 → 组件”的静态映射表。它的机制是动态的依赖关系图：
- 当组件首次渲染，所有被访问的响应式属性都会把当前的副作用（effect）记录为自己的依赖
- 当某个属性被修改，它会通知所有已注册的依赖重新执行（比如重新运行组件的 render 函数）
- 这个过程是细粒度的：改
user.name不会触发依赖user.age的更新，除非两者在同一计算逻辑中被同时读取
注意边界：非响应式变更不会触发更新
如果绕过响应式系统直接修改，状态和视图就会脱节：
-
this.obj.newProp = 'hello'（Vue 2）或obj.newProp = 'hello'（未用reactive包裹的普通对象）→ 新属性不可响应 - 数组通过索引直接赋值：
arr[0] = newValue→ Vue 2 无法检测，Vue 3 可以（Proxy 支持） - 解决方式不是“映射”，而是使用响应式 API 补全能力：
this.$set(obj, 'newProp', val)、Vue.set()、ref().value、reactive()初始化等
父子组件间也不是映射，而是响应式传递
props 和 emits 构成单向数据流，但仍是响应式链路的一部分：
- 父组件传给子组件的 props 是响应式引用（Vue 3 中为 shallow ref 或 proxy，Vue 2 中为 observer 包裹对象）
- 子组件对 props 的读取会建立对父组件状态的依赖；父组件状态变，子组件 re-render
- 子组件不能直接改 props，但可通过 emit 通知父组件，由父组件修改自身响应式状态，形成闭环
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
