MVVM框架中数据双向绑定原理实现-js教程-PHP中文网

MVVM框架的双向绑定通过数据劫持与观察者模式实现，ViewModel作为核心枢纽连接View与Model，利用Object.defineProperty或Proxy拦截数据变化，在getter中收集依赖、setter中触发更新，结合模板指令（如v-model）自动同步视图与数据，解决传统开发中手动操作DOM导致的繁琐、易错、低效问题。Proxy相比defineProperty能监听新增属性和数组变化，支持深层对象惰性代理，性能更优但兼容性差；前者适用于现代浏览器与Vue3等新框架，后者用于Vue2等需兼容旧环境的场景。开发者应根据项目对兼容性、性能及维护性的需求选择合适框架，从而间接确定实现策略，最终实现数据与视图的自动化同步。

mvvm框架中数据双向绑定原理实现

MVVM框架中的数据双向绑定，在我看来，核心就是一套巧妙的自动化机制，它让视图（UI）和数据模型（Model）之间能够“心有灵犀”，一方发生变化，另一方能立刻感知并同步更新。这背后，往往离不开观察者模式、属性描述符（如ES5的

Object.defineProperty

登录后复制

）或是更现代的代理机制（如ES6的

Proxy

登录后复制

）在幕后默默工作。

解决方案

要深入理解MVVM框架中数据双向绑定的实现，我们得把目光投向ViewModel这个核心枢纽。它就像一个翻译官，一头连接着代表UI的View，另一头连接着业务数据Model。当View需要展示数据时，ViewModel会从Model中获取并格式化；当用户在View上操作（比如输入文字）时，ViewModel又会捕获这些变化，并反向更新到Model。

这“翻译”和“同步”的过程，就是双向绑定的魅力所在。其实现原理，通常可以概括为以下几个关键点：

数据劫持/代理： 这是双向绑定的基石。框架会想方设法“监控”ViewModel中的数据。
- ES5的
  Object.defineProperty
  登录后复制
  ：比如Vue 2.x就是用这个。它允许我们给对象的属性定义getter和setter。每当读取（get）数据时，可以收集依赖（哪些UI元素在使用这个数据）；每当写入（set）数据时，就可以通知所有依赖它的UI元素去更新。
- ES6的
  Proxy
  登录后复制
  ：这是Vue 3.x和一些其他现代库的选择。
```
Proxy
```
  登录后复制
  比
```
defineProperty
```
  登录后复制
  强大得多，它能代理整个对象，拦截几乎所有操作，包括属性的读取、写入、删除，甚至新增属性、数组操作等。这意味着它能更全面、更高效地追踪数据变化，解决了
```
defineProperty
```
  登录后复制
  在新增/删除属性和数组变动上的痛点。
观察者模式/发布-订阅模式： 无论采用哪种数据劫持方式，当数据发生变化时，都需要一种机制来通知那些“关心”这个数据的UI组件。这就是观察者模式的舞台。
- 当一个UI组件（比如一个
```
<span>
```
  登录后复制
  标签显示某个变量）被渲染时，它会“订阅”这个变量的变化。这个订阅过程通常发生在变量的
```
getter
```
  登录后复制
  被触发时。
- 当这个变量通过
```
setter
```
  登录后复制
  或
```
Proxy
```
  登录后复制
  被修改时，它会“发布”一个通知。所有之前订阅过它的UI组件都会收到通知，然后执行相应的更新操作，比如重新渲染DOM。
模板解析与指令系统： 框架会解析HTML模板，识别出特殊的指令（如Vue的
```
v-model
```
登录后复制
、
```
{{ }}
```
登录后复制
），这些指令告诉框架哪些UI元素需要与哪些数据进行绑定。
- v-model
  登录后复制
  ：这是一个典型的双向绑定指令。它其实是
```
v-bind:value
```
  登录后复制
  （数据到视图）和
```
v-on:input
```
  登录后复制
  （视图到数据）的语法糖。当数据改变，
```
value
```
  登录后复制
  更新；当用户输入，
```
input
```
  登录后复制
  事件触发，数据随之更新。
- 单向绑定： 像
```
{{ }}
```
  登录后复制
  或
```
v-bind
```
  登录后复制
  这样的，只负责将数据从ViewModel同步到View，不监听View的变化。
虚拟DOM（可选但常见）： 很多现代框架（如Vue、React）会引入虚拟DOM。当数据变化导致UI需要更新时，框架不会直接操作真实DOM，而是先生成一个新的虚拟DOM树，然后与旧的虚拟DOM树进行对比（diff算法），找出最小的差异，最后只更新真实DOM中发生变化的部分。这大大提高了UI更新的效率。

总结一下，MVVM的双向绑定就是通过数据劫持/代理来感知数据变化，再结合观察者模式来通知依赖的UI，并通过模板解析和指令系统将这一切自动化。它把开发者从繁琐的DOM操作中解放出来，让我们能更专注于业务逻辑。

为什么MVVM需要双向绑定？它解决了哪些传统痛点？

在我看来，MVVM之所以如此推崇双向绑定，核心在于它彻底改变了前端开发中数据与视图交互的范式，解决了过去那些让人头疼的“手工活”和“同步难题”。

以前，我们搞前端，尤其是jQuery时代，那真是“刀耕火种”啊。每次数据变了，得手动找到对应的DOM元素，然后更新它的内容、样式。用户在输入框里敲了字，或者点了什么按钮，我们也得手动去监听事件，然后把UI上的变化同步到JavaScript的数据模型里。这个过程，说白了就是两套系统（数据和视图）在并行，每次都要靠开发者手动去“对账”，去“同步”。

这带来了几个显而易见的痛点：

繁琐的DOM操作： 业务逻辑里充斥着大量的
```
document.getElementById().innerHTML = ...
```
登录后复制
或者
```
$.ajax(...).done(function(data){ $('#someDiv').text(data.name); });
```
登录后复制
。代码又臭又长，可读性极差。
数据与视图不同步的风险： 手动同步意味着很容易遗漏。比如数据更新了，忘了更新某个角落的UI；或者UI变了，忘了更新背后的数据模型。这种不同步会导致各种难以调试的bug，用户体验也一塌糊涂。
高耦合，低维护性： 业务逻辑和UI更新逻辑混杂在一起，改一个地方可能牵一发而动全身。项目稍微一复杂，维护起来简直是噩梦。
开发效率低下： 大量重复的手动同步工作，极大地拖慢了开发进度。

MVVM的双向绑定，就像施了个魔法，把这些痛点几乎一扫而光。它提供了一种声明式的方式：你只需要告诉框架“这个输入框的值和我的

userName

登录后复制

变量是绑定的”，然后框架就自动帮你搞定了后续的所有同步工作。数据变，UI自动更新；UI变，数据自动更新。开发者可以把精力完全集中在业务逻辑上，而不用再操心那些底层的DOM操作和数据同步细节。这不光提升了开发效率，也让代码结构更清晰、更易维护，简直是前端开发的一大福音。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

ES5的

Object.defineProperty

登录后复制

和ES6的

Proxy

登录后复制

在实现双向绑定时有何异同？

在MVVM框架中实现双向绑定，

Object.defineProperty

登录后复制

和

Proxy

登录后复制

是两种最主流、也最具代表性的技术方案。它们的目的都是为了“劫持”或“代理”数据操作，以便在数据变化时能有所感知并做出响应，但实现方式和能力上却有着显著的异同。

Object.defineProperty

登录后复制

(ES5)：

原理： 这种方式的核心在于劫持对象属性的
```
getter
```
登录后复制
和
```
setter
```
登录后复制
。当你定义一个属性时，可以为它指定一个
```
get
```
登录后复制
函数和一个
```
set
```
登录后复制
函数。每当程序读取这个属性时，就会调用
```
get
```
登录后复制
；每当写入这个属性时，就会调用
```
set
```
登录后复制
。我们可以在
```
set
```
登录后复制
函数中加入通知逻辑，让依赖这个属性的视图更新。
优点：
- 兼容性好： 它是ES5标准的一部分，这意味着它能在包括IE9+在内的绝大多数现代浏览器中工作，这也是Vue 2.x选择它的主要原因。
缺点：
- 无法监听新增/删除属性：
```
defineProperty
```
  登录后复制
  只能劫持已经存在的属性。如果你给一个响应式对象新增了一个属性，或者删除了一个属性，
```
defineProperty
```
  登录后复制
  是无法感知的，需要额外的API（如Vue的
```
$set
```
  登录后复制
  和
```
$delete
```
  登录后复制
  ）来辅助实现。
- 无法直接监听数组索引变化： 对于数组，直接修改
```
arr[index] = newValue
```
  登录后复制
  或者修改
```
arr.length
```
  登录后复制
  ，
```
defineProperty
```
  登录后复制
  也无法感知。Vue 2.x为此不得不重写了数组的一些原型方法（如
```
push
```
  登录后复制
  ,
```
pop
```
  登录后复制
  ,
```
splice
```
  登录后复制
  等），以确保这些操作也能触发更新。
- 需要递归遍历： 如果对象嵌套层级很深，
```
defineProperty
```
  登录后复制
  需要对所有子属性进行递归遍历，为每个属性都设置
```
getter
```
  登录后复制
  /
```
setter
```
  登录后复制
  ，这在初始化时会有一定的性能开销。
- 无法监听Map、Set等数据结构： 它的能力仅限于普通对象属性。

Proxy

登录后复制

(ES6)：

原理：
```
Proxy
```
登录后复制
是ES6引入的一个新特性，它允许你创建一个对象的代理（Proxy），然后对这个代理对象进行操作。所有对代理对象的操作（如读取属性、设置属性、删除属性、函数调用等）都会被拦截，并可以自定义拦截行为。
优点：
- 全面监听：
```
Proxy
```
  登录后复制
  可以拦截几乎所有对目标对象的操作，包括：
  - 属性的读取（
```
get
```
    登录后复制
    ）和设置（
```
set
```
    登录后复制
    ）。
  - 属性的删除（
```
deleteProperty
```
    登录后复制
    ）。
  - 新增属性（
```
set
```
    登录后复制
    ）。
  - 函数调用（
```
apply
```
    登录后复制
    ）和构造函数调用（
```
construct
```
    登录后复制
    ）。
  - 甚至对
```
Map
```
    登录后复制
    、
```
set
```
    登录后复制
    等数据结构的操作也能被有效拦截。
- 无需递归：
```
Proxy
```
  登录后复制
  代理的是整个对象，而不是单个属性。这意味着它不需要在初始化时递归遍历所有深层属性，只有当访问到某个深层属性时，才会对其子对象进行代理，实现了“惰性代理”，性能更优。
- 更符合直觉： 解决了
```
defineProperty
```
  登录后复制
  在新增/删除属性和数组操作上的痛点，开发体验更流畅。
缺点：
- 兼容性：
```
Proxy
```
  登录后复制
  是ES6特性，无法在IE浏览器中运行（包括IE11），这使得它在需要兼容老旧浏览器的项目中受到限制。这也是Vue 3.x放弃兼容IE11的原因之一。

异同总结：

相同点： 它们都是为了实现对数据操作的拦截，从而在数据变化时触发响应式更新。
不同点：
```
Proxy
```
登录后复制
提供了更强大、更全面的拦截能力，解决了
```
defineProperty
```
登录后复制
在监听新增/删除属性、数组变化和深层对象初始化性能上的不足。但
```
Proxy
```
登录后复制
的兼容性不如
```
defineProperty
```
登录后复制
。

在我看来，

Proxy

登录后复制

无疑是未来响应式系统的主流，它让数据绑定变得更加自然、高效。但如果你项目需要兼容老旧浏览器，

Object.defineProperty

登录后复制

依然是不可或缺的基石。

如何在实际项目中选择合适的双向绑定实现策略？

在实际项目中选择双向绑定实现策略，其实并不是我们开发者需要“手动”去实现和选择的，更多时候是我们在选择前端框架时，就已经间接做出了选择。不过，理解这些底层策略，能帮助我们更好地使用框架，并在遇到问题时有更清晰的排查思路。

根据框架选择：
- Vue 2.x及其生态： 如果你的项目基于Vue 2.x，那么你已经在使用基于
```
Object.defineProperty
```
  登录后复制
  的响应式系统。你需要注意其在新增/删除属性和数组操作上的限制，并学习使用
```
Vue.set
```
  登录后复制
  或
```
this.$set
```
  登录后复制
  等API来规避这些问题。
- Vue 3.x及其生态： 如果是Vue 3.x，那么恭喜你，它已经全面拥抱了
```
Proxy
```
  登录后复制
  。这意味着你可以更自然地操作数据，包括新增属性、删除属性、直接修改数组索引等，都能被响应式系统感知。这无疑带来了更好的开发体验和更强大的性能。
- React / MobX： React本身并没有内置双向绑定，它更推崇单向数据流和受控组件。但如果你在React项目中使用MobX这样的状态管理库，MobX的响应式系统就是基于
```
Proxy
```
  登录后复制
  实现的，能提供类似Vue 3的便利性。
- Angular： Angular使用脏检查（Dirty Checking）机制，它通过比较前后两次数据状态来判断是否需要更新视图。虽然不是严格意义上的“数据劫持”，但它也实现了数据与视图的同步。
考虑浏览器兼容性：
- 需要兼容IE11或更老的浏览器？ 那么
```
Proxy
```
  登录后复制
  就不是一个可行的选项，你只能选择基于
```
Object.defineProperty
```
  登录后复制
  或脏检查的方案。这也是很多企业级项目在升级到Vue 3时需要慎重考虑的因素。
- 只面向现代浏览器（Chrome, Firefox, Edge等）？ 那么
```
Proxy
```
  登录后复制
  无疑是更优的选择，它能提供更全面的响应式能力和更好的性能。
项目复杂度和性能要求：
- 对于数据结构复杂、嵌套层级深的大型应用，
```
Proxy
```
  登录后复制
  的惰性代理和全面拦截能力通常会带来更好的性能表现，因为它避免了
```
Object.defineProperty
```
  登录后复制
  在初始化时的大量递归开销。
- 当然，大多数情况下，现代框架的响应式系统都已经足够优化，我们不必过于纠结底层实现带来的细微性能差异，更多是关注开发体验和功能完整性。
自定义需求和学习成本：
- 如果你需要从零开始构建一个响应式系统，或者对框架底层原理有深入研究的需求，那么理解
```
Proxy
```
  登录后复制
  的强大功能和灵活性会非常有价值。它能让你构建出更强大、更通用的数据响应方案。
- 但对于日常业务开发，我们更多是使用框架提供的API，理解其背后的原理是为了更好地使用和排查问题，而不是去重新发明轮子。