如何用60行代码实现迷你响应式系统Vue

简介

Vue是一款流行的JavaScript框架，其拥有强大的响应式系统，可以方便地实现数据绑定及视图更新。本文将介绍如何用60行代码实现一个迷你的Vue响应式系统，以更好地理解Vue原理。

响应式系统的实现

响应对象Reactive

我们首先需要实现一个响应对象Reactive，用于监听对象的变化并触发更新。该响应对象需要包含三个主要的方法：getter、setter和observer。其中getter方法用于获取数据值，setter方法用于设置数据值并触发响应，observer方法用于监听对象的变化。

下面是一个简单的响应对象实现代码示例：

function defineReactive(data, key, value) {
  observe(val); // 对象递归遍历
  var dep = new Dep(); // 创建新的依赖项

  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      if (Dep.target) { // 当前存在依赖项
        dep.addSub(Dep.target); // 添加到依赖项列表
      }
      return value;
    },
    set: function(newVal) {
      if (value === newVal) {
        return;
      }
      value = newVal;
      dep.notify(); // 通知所有依赖项
    }
  });
}

观察对象Observer

接下来，我们需要实现一个观察对象Observer，用于遍历对象属性并将其转化为响应对象。该观察对象需要包含两个主要的方法：walk和defineReactive。其中walk方法用于遍历对象属性并调用defineReactive转换为响应对象，defineReactive则使用上面实现的getter、setter和observer方法。

下面是一个简单的观察对象实现代码示例：

function observe(value, vm) {
  if (!value || typeof value !== 'object') {
    return;
  }
  return new Observer(value);
}

function Observer(value) {
  this.value = value;
  this.walk(value);
}

Observer.prototype.walk = function(obj) {
  var keys = Object.keys(obj);
  for (var i = 0; i < keys.length; i++) {
    defineReactive(obj, keys[i], obj[keys[i]]);
  }
};

订阅发布模式Dep

最后，我们需要实现一个订阅发布模式Dep，用于管理响应的依赖项及触发其更新。该订阅发布模式需要包含三个主要的方法：addSub、removeSub和notify。其中addSub方法用于添加依赖项，removeSub方法用于移除依赖项，notify方法用于触发依赖项更新。

下面是一个简单的订阅发布模式实现代码示例：

function Dep() {
  this.subs = [];
}

Dep.target = null;

Dep.prototype.addSub = function(sub) {
  this.subs.push(sub);
};

Dep.prototype.removeSub = function(sub) {
  var index = this.subs.indexOf(sub);
  if (index != -1) {
    this.subs.splice(index, 1);
  }
};

Dep.prototype.notify = function() {
  for (var i = 0; i < this.subs.length; i++) {
    this.subs[i].update();
  }
};

最终，我们的60行代码迷你响应式系统Vue就实现了。

示例说明

示例1：数据绑定

我们可以使用上述响应式系统实现简单的数据绑定。如下所示，当在input输入框中输入姓名时，h3标签中的姓名会实时更新。

<body>
  <input id="name" type="text" v-model="name">
  <h3>Hello, {{name}}!</h3>
  <script>
    var data = {name: 'Tom'};
    var vm = new Vue({
      el: 'body',
      data: data
    });
  </script>
</body>

示例2：计算属性

我们可以使用上述响应式系统实现计算属性。如下所示，当修改input输入框中的数字时，h3标签中的数字会实时更新，并且sum属性会自动计算。

<body>
  <input id="num1" type="number" v-model="num1">
  <input id="num2" type="number" v-model="num2">
  <h3>{{num1}} + {{num2}} = {{sum}}</h3>
  <script>
    var data = {
      num1: 1,
      num2: 2,
      sum: 0
    };
    var vm = new Vue({
      el: 'body',
      data: data,
      computed: {
        sum: function() {
          return parseInt(this.num1) + parseInt(this.num2);
        }
      }
    });
  </script>
</body>