⚡
⚡
单向绑定：数据 → 视图。数据源变化会自动更新 DOM，但用户操作 DOM 不会反向修改数据。适合展示只读信息（用户名、状态等）。
双向绑定（v-model）：数据 ↔ 视图同步。输入框内容改变时数据更新，数据变化时输入框也更新。
v-model = :value + @input 的语法糖。
<input v-model="form.nick" />
<input
:value="form.nick"
@input="form.nick =
$event.target.value"
/>
响应式原理：Vue 3 使用 Proxy 拦截对象读写。当数据变化时，所有依赖该数据的组件自动重新渲染。
点击中心数据源，观察所有订阅组件同步更新。
// Vue 3 reactive 核心原理
function reactive(obj) {
return new Proxy(obj, {
get(target, key) {
track(target, key) // 收集依赖
return target[key]
},
set(target, key, val) {
target[key] = val
trigger(target, key) // 触发更新
return true
}
})
}
// 依赖收集 & 触发
const deps = new Map()
function track(target, key) {
// 记录"谁在使用这个数据"
deps.set(key, currentEffect)
}
function trigger(target, key) {
// 通知所有依赖方重新执行
const effect = deps.get(key)
effect?.() // 重新渲染组件
}
综合演示：填写左侧表单，右侧用户卡片和 JSON 数据实时同步更新。体验完整的数据绑定闭环。