数据双向绑定指当数据模型发生变化时，视图会自动更新；当用户操作视图修改数据时，数据模型也会同步更新，这种机制大幅减少了手动操作DOM的代码量，提升了开发效率。Proxy是ES6引入的代理对象，能够拦截并自定义对象的基本操作，是实现现代双向绑定的核心工具。
数据双向绑定的核心逻辑
实现双向绑定需要完成两个核心环节：一是数据劫持，即监听数据的变化；二是依赖收集与触发，即数据变化时通知所有依赖该数据的视图进行更新。传统的双向绑定实现会使用Object.defineProperty方法，但该方法存在无法监听对象新增属性、无法监听数组变化等局限性，而Proxy对象可以解决这些问题。
Proxy对象的核心作用
Proxy对象可以创建一个对象的代理，从而拦截该对象的一系列操作，比如属性的读取、赋值、删除等。在双向绑定场景中，Proxy的主要作用包括：
- 拦截对象的属性读取操作，在读取时收集依赖该属性的视图更新函数
- 拦截对象的属性赋值操作，在属性值变化时触发所有收集到的依赖函数，完成视图更新
- 支持监听对象的所有属性变化，包括新增属性和数组的修改，无需额外处理
基于Proxy实现数据双向绑定的完整示例
下面通过一个简单的示例演示如何使用Proxy实现数据双向绑定，包含数据劫持、依赖收集和视图更新三个部分。
1. 依赖收集器实现
首先需要实现一个依赖收集器，用于存储每个数据属性对应的更新函数：
// 依赖收集器，每个属性对应一个依赖列表
class Dep {
constructor() {
this.subscribers = []
}
// 添加依赖
depend() {
if (currentWatcher) {
this.subscribers.push(currentWatcher)
}
}
// 触发所有依赖
notify() {
this.subscribers.forEach(watcher => watcher())
}
}
// 当前正在收集的依赖
let currentWatcher = null
// 存储所有属性的依赖对象
const depsMap = new Map()
// 获取某个属性的依赖对象，不存在则新建
function getDep(key) {
if (!depsMap.has(key)) {
depsMap.set(key, new Dep())
}
return depsMap.get(key)
}
2. Proxy数据劫持实现
使用Proxy对数据对象进行代理，拦截get和set操作：
// 创建响应式数据
function reactive(data) {
return new Proxy(data, {
// 拦截属性读取
get(target, key, receiver) {
const dep = getDep(key)
dep.depend()
return Reflect.get(target, key, receiver)
},
// 拦截属性赋值
set(target, key, value, receiver) {
const oldValue = target[key]
const result = Reflect.set(target, key, value, receiver)
// 值发生变化时触发更新
if (oldValue !== value) {
const dep = getDep(key)
dep.notify()
}
return result
}
})
}
3. 视图更新函数与双向绑定演示
定义视图更新函数，将数据和DOM元素绑定，实现双向同步：
// 定义更新函数，将数据变化同步到DOM
function watch(fn) {
currentWatcher = fn
fn()
currentWatcher = null
}
// 初始化数据
const data = reactive({
name: '测试数据',
age: 18
})
// 获取DOM元素
const nameInput = document.querySelector('#nameInput')
const nameText = document.querySelector('#nameText')
const ageInput = document.querySelector('#ageInput')
const ageText = document.querySelector('#ageText')
// 绑定name的更新逻辑
watch(() => {
nameText.textContent = data.name
})
// 绑定age的更新逻辑
watch(() => {
ageText.textContent = data.age
})
// 监听输入框变化，同步到数据
nameInput.addEventListener('input', (e) => {
data.name = e.target.value
})
ageInput.addEventListener('input', (e) => {
data.age = Number(e.target.value)
})
对应的HTML结构如下：
<div> <p>姓名：<input id="nameInput" type="text" /></p> <p>当前姓名：<span id="nameText"></span></p> <p>年龄：<input id="ageInput" type="number" /></p> <p>当前年龄：<span id="ageText"></span></p> </div>
Proxy与传统实现的对比
和基于Object.defineProperty的实现方式相比，Proxy的优势非常明显：
| 对比维度 | Object.defineProperty | Proxy |
|---|---|---|
| 监听范围 | 只能监听已有属性，新增属性需要额外处理 | 可以监听对象所有属性的变化，包括新增属性 |
| 数组支持 | 无法直接监听数组的push、pop等方法修改 | 可以拦截数组的所有操作 |
| 性能 | 需要遍历对象所有属性逐个定义，性能较差 | 代理整个对象，无需遍历，性能更优 |
| 兼容性 | 支持IE9及以上 | 不支持IE，支持现代浏览器 |
注意事项
使用Proxy实现双向绑定时需要注意，Proxy是ES6的特性，不支持IE浏览器，如果需要兼容旧环境，还是需要使用Object.defineProperty方案。另外Proxy代理的是对象本身，如果数据是基本类型，需要包裹成对象才能使用Proxy进行代理。同时依赖收集的过程需要避免重复收集相同的更新函数，否则会导致不必要的重复更新。
JavaScript数据双向绑定Proxy对象响应式编程修改时间：2026-06-29 14:48:37