谈谈你对双向绑定的理解

1. 什么是双向绑定

我们先从单向绑定切入：单向绑定非常简单，就是把 Model 绑定到 View，当我们用 JavaScript 代码更新 Model 时，View 就会自动更新。

双向绑定就很容易联想到了：在单向绑定的基础上，用户更新了 View，Model 的数据也自动被更新了，这种情况就是双向绑定。常见的例子是表单输入（v-model）。

2. 双向绑定原理（ViewModel 的作用与组成部分）

ViewModel 是 MVVM 模式的核心：它是连接 View 和 Model 的桥梁。它有两个方向：

将 Model 转化成 View，即将后端传递的数据转化成所看到的页面。实现方式是数据绑定。
将 View 转化成 Model，即将所看到的页面转化成后端的数据。实现方式是 DOM 事件监听。

两个方向都实现的，我们称之为数据的双向绑定。

它的两个主要组成部分：

Observer：对数据对象的属性进行递归监听，使用 Object.defineProperty（Vue 2）/ Proxy（Vue 3）劫持 getter / setter。
Watcher：订阅数据变化，触发更新回调。
Compile：解析模板指令，将模板中的变量替换成数据，初始化渲染页面视图，并将每个指令对应的节点绑定更新函数。

3. 双向绑定流程

new Vue() 进入初始化阶段。
observe(data) 把 data 上的所有属性递归转换为 getter / setter，建立依赖收集机制。
compile 解析模板指令，把模板中的变量替换成数据，初始化渲染页面视图。
订阅者 Watcher 在初始化时把自己添加到 Dep 中。
数据变更时，Dep.notify() 通知所有订阅者 Watcher。
订阅者回调中触发 update，重新渲染视图。

4. 如何实现双向绑定

编译 html 模板时，发现需要特殊处理的变量，比如 v-model="name"，就准备为其创建 watcher。在创建 watcher 时，先把这个 watcher 挂载到 Dep.target 这个全局静态变量上，然后触发一次 get 事件，这样就触发了 get 函数中的 Dep.target && dep.addSub(Dep.target)。等 get 到了变量以后，也已经添加到 subs 队列里了，这时候再令 Dep.target = null。

首先实例化 Vue 类，在实例化时先触发 observe，递归地对所有 data 中的变量进行订阅。每次订阅之前都会生成一个 dep 实例，因此每一个 Object 类型的变量都有一个 dep 实例。dep 是闭包产生的，因此所有与 dep 有关的操作都要放到 defineReactive 函数内部执行。

每一个 data 以及其中凡是对象的变量，都唯一对应一个 dep。要实现从 model -> View 的绑定：把所有发布者 watcher 放到一个 dep 中，改变变量时，遍历 subs 调用 watcher.update() 更新页面。

Dep.target

target 是一个静态变量，所有 dep 实例的 target 都指向同一个东西，全局唯一。它就是一个 watcher。工作原理：在 defineProperty 的 get 事件被触发时进行依赖收集。创建一个 watcher 时把这个 watcher 放到 target 上，依赖收集完后置 null。

<body>
  <div id="app">
    <input type="text" v-model="message">
    {{ message }}
  </div>

  <script src="./node_modules/vue/dist/vue.js"></script>
  <script>
    class Vue {
      constructor(options) {
        // 1. 保存数据
        this.$el = options.el
        this.$data = options.data
        this.$options = options

        // 2. 将 data 添加到响应式系统中
        new Observer(this.$data)

        // 3. 代理 this.$data 数据
        Object.keys(this.$data).forEach(key => {
          this._proxy(key)
        })

        // 4. 处理 el
        new Compiler(this.$el, this)
      }

      _proxy(key) {
        Object.defineProperty(this, key, {
          configurable: true,
          enumerable: true,
          set(newValue) {
            this.$data[key] = newValue
          },
          get() {
            return this.$data[key]
          }
        })
      }
    }

    class Observer {
      constructor(data) {
        this.data = data
        Object.keys(data).forEach(key => {
          this.defineReactive(this.data, key, data[key])
        })
      }

      defineReactive(data, key, val) {
        const dep = new Dep()
        Object.defineProperty(data, key, {
          configurable: true,
          enumerable: true,
          get() {
            if (Dep.target) {
              dep.addSub(Dep.target)
            }
            return val
          },
          set(newValue) {
            if (newValue === val) return
            val = newValue
            dep.notify()
          }
        })
      }
    }

    class Dep {
      constructor() {
        this.subs = []
      }

      addSub(sub) {
        this.subs.push(sub)
      }

      notify() {
        this.subs.forEach(sub => {
          sub.update()
        })
      }
    }

    class Watcher {
      constructor(node, name, vm) {
        this.node = node
        this.name = name
        this.vm = vm
        Dep.target = this
        this.update()
        Dep.target = null
      }

      update() {
        this.node.nodeValue = this.vm[this.name]
      }
    }

    const reg = /{{(.+)}}/

    class Compiler {
      constructor(el, vm) {
        this.el = document.querySelector(el)
        this.vm = vm
        this.frag = this._createFragment()
        this.el.appendChild(this.frag)
      }

      _createFragment() {
        const frag = document.createDocumentFragment()
        let child
        while ((child = this.el.firstChild)) {
          this._compile(child)
          frag.appendChild(child)
        }
        return frag
      }

      _compile(node) {
        if (node.nodeType === 1) {
          // 标签节点
          const attrs = node.attributes
          if (attrs.hasOwnProperty('v-model')) {
            const name = attrs['v-model'].nodeValue
            node.addEventListener('input', e => {
              this.vm[name] = e.target.value
            })
          }
        }
        if (node.nodeType === 3) {
          // 文本节点
          if (reg.test(node.nodeValue)) {
            const name = RegExp.$1.trim()
            new Watcher(node, name, this.vm)
          }
        }
      }
    }

    const app = new Vue({
      el: '#app',
      data: {
        message: 'hahaha'
      }
    })
  </script>
</body>