实现vue的双向绑定v-model(简易版）

Vue.js的双向数据绑定主要是通过v-model指令来实现的。但直接手写一个简易的双向绑定系统来模拟Vue的这一特性，可以帮助理解其背后的机制。以下是一个简化的实现思路，包括定义一个简单的观察者模式（Observer）和发布订阅模式（Pub/Sub）来实现数据变化的监听与更新。

1. 数据监听器（Observer）

首先，我们需要创建一个数据监听器，用于监听数据对象属性的变化，并在属性值改变时通知订阅者。

function observe(data) {
  if (!data || typeof data !== 'object') {
    return;
  }

  // 遍历所有属性
  Object.keys(data).forEach(key => {
    defineReactive(data, key, data[key]);
  });
}

function defineReactive(data, key, val) {
  observe(val); // 递归解决嵌套对象

  const dep = new Dep(); // 创建一个依赖收集器

  Object.defineProperty(data, key, {
    get() {
      Dep.target && dep.addDep(Dep.target); // 收集依赖
      return val;
    },
    set(newVal) {
      if (newVal === val) {
        return;
      }
      val = newVal;
      dep.notify(); // 通知所有订阅者
    }
  });
}

2. 依赖收集器࿰