手撸 MVVM 框架，从此揭秘双向绑定的秘密！

2023-12-18 14:07:34

前言

两年前，我还在一家创业公司工作，公司后来被收购了。在没有业务压力的情况下，我决定自己动手写一个类似 Vue 的 MVVM 框架玩，并同时在这个框架上实现了一个 Material Design 风格的组件库。麻雀虽小，五脏俱全，这个框架基本满足了我当时的需求。现在，我想把这个框架的双向绑定核心分享给大家，希望能对你们有所帮助。

MVVM 框架简介

MVVM 是 Model-View-ViewModel 的缩写，是一种前端开发框架。它将应用程序的逻辑分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel）。模型负责数据的存储和操作，视图负责数据的展示，视图模型负责在模型和视图之间进行数据同步。

双向绑定是 MVVM 框架的核心功能之一。它允许视图模型和视图之间自动同步数据，从而实现数据的实时更新。例如，当用户在文本框中输入内容时，文本框中的内容会自动更新到视图模型中。同样地，当视图模型中的数据发生变化时，视图中的数据也会自动更新。

双向绑定的核心原理

双向绑定的核心原理是数据劫持。数据劫持是指通过某种手段将对象的属性值劫持下来，并在属性值发生变化时触发相应的回调函数。在 MVVM 框架中，数据劫持通常是通过 Object.defineProperty() 方法来实现的。

Object.defineProperty() 方法可以劫持对象的属性值，并在属性值发生变化时触发相应的回调函数。我们可以通过如下代码来劫持对象的属性值：

Object.defineProperty(obj, "name", {
  get: function() {
    return this._name;
  },
  set: function(value) {
    this._name = value;
    console.log("name属性值发生了变化，新值为：" + value);
  }
});

通过这段代码，我们就可以劫持对象的name属性值。当name属性值发生变化时，console.log() 方法就会被触发。