JavaScript数据绑定_双向绑定实现原理-js教程-PHP中文网

JavaScript数据绑定_双向绑定实现原理

幻影之瞳

发布： 2025-11-22 10:15:06

原创

263人浏览过

双向数据绑定的核心是数据与视图的自动同步。通过Object.defineProperty或Proxy劫持数据，结合DOM事件监听实现联动更新。

javascript数据绑定_双向绑定实现原理

双向数据绑定的核心在于：当数据发生变化时，视图自动更新；当视图（如表单输入）发生变化时，数据也自动同步更新。JavaScript 中实现双向绑定主要有几种方式，其原理依赖于数据劫持或发布-订阅模式。

1. 基于 Object.defineProperty 的数据劫取

这是 Vue 2.x 实现双向绑定的基础。通过 Object.defineProperty 劫持对象属性的 getter 和 setter，在读取和赋值时插入自定义逻辑。

基本思路如下：

遍历数据对象，对每个属性使用 defineProperty 定义 getter 和 setter
在 getter 中收集依赖（哪个视图用到了这个数据）
在 setter 中通知所有依赖进行更新
结合指令或模板解析，把数据渲染到视图，并监听视图事件（如 input）来反向更新数据

示例代码片段：

let data = { message: 'hello' };
let view = document.getElementById('view');
let input = document.getElementById('input');

Object.defineProperty(data, 'message', {
  get() {
    return this._message;
  },
  set(value) {
    this._message = value;
    // 更新视图
    view.innerText = value;
    input.value = value;
  }
});

// 初始化
data._message = 'hello';
view.innerText = data.message;
input.value = data.message;

// 监听输入框变化，反向更新数据
input.addEventListener('input', function() {
  data.message = this.value;
});

登录后复制

2. 使用 Proxy 实现代理拦截（Vue 3 的方式）

Proxy 是 ES6 提供的新特性，能更强大地拦截整个对象的操作，包括属性新增、删除等，弥补了 defineProperty 的不足。

立即学习“Java免费学习笔记（深入）”；

它不需要递归遍历对象，可以监听动态添加的属性。

angularjs框架实现纯前端实现双向绑定数据表格

查看详情

示例：

let data = { message: 'hello' };

let handler = {
  set(target, key, value) {
    target[key] = value;
    // 视图更新逻辑
    document.getElementById('view').innerText = value;
    document.getElementById('input').value = value;
    return true;
  }
};

let proxy = new Proxy(data, handler);

// 绑定输入事件
document.getElementById('input').addEventListener('input', function() {
  proxy.message = this.value;
});

// 初始渲染
document.getElementById('view').innerText = proxy.message;
document.getElementById('input').value = proxy.message;

登录后复制