何以解忧，唯有自己写Vue

双向绑定

Vue 用着最舒服的地方，想必就是它的双向绑定机制，不过在搞清楚这方点之前，举个最简单的例子回顾下 Vue 双向绑定的表象。

Vue

无论是从输入框输入，还是从 Vue 开发工具中编辑，都会发现数据和页面展示是同步的，而 Vue 实时监听页面和数据的变化，打通双向通道的核心，其实只是 defineProperty 这一个 js 原生方法。

那就先来说说这个 defineProperty 的功能：

1.可以直接在一个对象上定义一个新属性。
2.可以直接修改一个对象的现有属性。

Object.defineProperty(object, prop, descriptor)共有三个参数：

object：需要操作的对象。
prop：需要操作的属性名。
descriptor：属性描述符，描述操作属性取值，以及是否可以修改、删除、迭代。

比如定义一个 author 对象，希望可以动态新增一个 name 属性，值为书雁祉，就可以使用 defineProperty。

let author = {};
Object.defineProperty(author, "name", {
  value: "书雁祉",
  writable: false,
  configurable: false,
  enumerable: false,
});

value：指定属性值。
writable：指定属性值是否可修改，默认值为 false 不可修改。
configurable：指定属性是否可删除，默认值为 false 不可删除。
enumerable：指定属性是否可迭代，默认值为 false 不可迭代。

Console

除此之外，defineProperty 还可以传入 get、set 方法用来监听属性，在获取 / 修改对象的属性值时，会自动调用 get / set 方法，但传入 get、set 时，不可传入 value、writable。

let author = { name: "书雁祉", age: 14 };
for (let key in author) {
  let syz = author[key];
  Object.defineProperty(author, key, {
    configurable: false,
    enumerable: false,
    get() {
      console.log("get");
      return syz;
    },
    set(value) {
      if (value !== syz) {
        console.log("set");
        syz = value;
      }
    },
  });
}

Console

在 Vue 中，为方便管理代码，Vue 使用了一个 Observe 类专门来处理对象的监听，在初始化类时将需要监听的对象传入即可。defineRecative 中，this.observer(old)是考虑到对象的属性值也可能是对象，this.observer(value)则是考虑到赋值时可能赋值一个对象，这两种情况都需要监听。

class Observer {
  constructor(data) {
    this.observer(data);
  }
  observer(object) {
    if (object && typeof object === "object") {
      for (let key in object) {
        this.defineRecative(object, key, object[key]);
      }
    }
  }
  defineRecative(object, attr, old) {
    this.observer(old);
    Object.defineProperty(object, attr, {
      get() {
        console.log("get");
        return old;
      },
      set: (value) => {
        if (value !== old) {
          console.log("set");
          this.observer(value);
          old = value;
        }
      },
    });
  }
}
let author = {
  name: {
    family: "书",
    first: "雁祉",
  },
  pet: "neko",
};
new Observer(author);

Console

回到创建 Vue 实例的代码，由此可以分析出：

1.Vue 是一个类，构造函数接收一个对象。
2.类会将 el 指定的 dom 元素作为根节点，将 data 中的属性值编译渲染到该节点上。
3.el 可以使 id 名，也可以是 dom 元素。
4.vue 会将 dom 与 data 分别绑定到$el 和$data 上

<div id="app">
  <input type="text" v-model="name" />
  <p>{{ name }}</p>
</div>
<script>
  const vue = new Vue({
    el: "#app",
    data: {
      name: "书雁祉",
      age: 14,
    },
  });
  console.log(vue.$el);
  console.log(vue.$data);
</script>

Console

由此，定义一个 Sue 类来实现与 Vue 相似的效果。

1.首先将 dom 元素和 data 都绑定在实例的$el 和$data 上，nodeType === 1 代表 el 为 dom 元素。
2.如果 dom 元素存在，根据指定的 dom 节点，定义 Compier 编译类，利用 data 渲染节点。

class Sue {
  constructor(options) {
    if (options.el.nodeType === 1) {
      this.$el = options.el;
    } else {
      this.$el = document.getElementById(options.el);
    }
    this.$data = options.data;
    if (this.$el) {
      new Compiler(this);
    }
  }
}
class Compiler {
  constructor(vm) {
    this.vm = vm;
  }
}

在写编译类前，需要了解一点，Vue 在解析节点时，不会每解析到一个需要渲染 data 的位置就更新一遍 dom 树，dom树更新会十分耗时且耗费浏览器性能，Vue 会将 dom 树放在内存中，将 data 渲染到内存中的虚拟 dom 树上，再将虚拟 dom 一次性渲染到界面中。
那么如何构建虚拟dom树，方法其实有很多，Vue 才用了 js 内置的 DocumentFragment 来构建。

class Compiler {
  constructor(vm) {
    this.vm = vm;
    const fragment = this.createFragment(vm.$el);
    console.log(fragment);
  }
  createFragment(app) {
    const fragment = document.createDocumentFragment();
    const node = app.firstChild;
    while (node) {
      fragment.appendChild(node);
      node = app.firstChild;
    }
    return fragment;
  }
}

注意：DocumentFragment 调用 appendChild 后，该 dom 元素会从 dom 节点中消失，所以取 firstChild 即可取到第一个。

<div id="app">
  <input type="text" v-model="name" />
  <p>{{ name }}</p>
</div>
<script>
  const sue = new Sue({
    el: "#app",
    data: {
      name: "书雁祉",
      age: 14,
    },
  });
  console.log(sue.$el);
  console.log(sue.$data);
</script>

Console

可见，虚拟 dom 已经写入内存，sue 实例上的 $el 和$ data 也分别挂载了 dom 元素和 data。下一步则需要解析解析虚拟 dom 树，渲染 $data 中的数据。

1.遍历虚拟 dom，判断当前遍历到的是元素节点还是文本节点。
2.元素节点则需获取属性名和属性值，判断有没有 v-* 属性（如 v-model），同时将节点继续传入 buildFragment 处理子节点。
3.文本节点则需判断内容有没有 {{}}。

class Compiler {
  constructor(vm) {
    this.vm = vm;
    const fragment = this.createFragment(vm.$el);
    this.buildFragment(fragment);
  }
  createFragment(app) {
    const fragment = document.createDocumentFragment();
    let node = app.firstChild;
    while (node) {
      fragment.appendChild(node);
      node = app.firstChild;
    }
    return fragment;
  }
  buildFragment(fragment) {
    for (let node of fragment.childNodes) {
      if (node.nodeType === 1) {
        this.buildElement(node);
        this.buildFragment(node);
      } else {
        this.buildText(node);
      }
    }
  }
  buildElement(node) {
    for (let attr of node.attributes) {
      let { name, value } = attr;
      if (name.startsWith("v-")) {
        console.log("元素", node, attr, name, value);
      }
    }
  }
  buildText(node) {
    let content = node.textContent;
    const regexp = /\{\{.+?\}\}/gi;
    if (regexp.test(content)) {
      console.log("文本", content);
    }
  }
}

Console

考虑到 v-* 属性的多样性，Vue 才用了一个专门用来处理指令的 CompilerUtil 对象，包含所有需要处理的属性对赢得方法，这里取其中几种举例。

1.对于 v-model，通常用在 input 中，所以只需设置节点的 value 为对应 $data 的属性值，最后在 constructor 中将 fragment 渲染到页面即可。
2.但只是这样会出现问题，比如对应 $data 的属性值是一个对象，而渲染的是该对象的属性值，则无法正确获取到，所以在 CompilerUtil 中定义 GetValue 函数，专门用来获取对应的属性值。

const CompilerUtil = {
  GetValue(value, vm) {
    const realValue = value.split(".").reduce((data, key) => {
      console.log("GetValue", data, key);
      return data[key];
    }, vm.$data);
    return realValue;
  },
  model(node, value, vm) {
    node.value = this.GetValue(value, vm);
  },
};

class Compiler {
  constructor(vm) {
    this.vm = vm;
    const fragment = this.createFragment(vm.$el);
    this.buildFragment(fragment);
    vm.$el.appendChild(fragment);
  }
  createFragment(app) {
    const fragment = document.createDocumentFragment();
    let node = app.firstChild;
    while (node) {
      fragment.appendChild(node);
      node = app.firstChild;
    }
    return fragment;
  }
  buildFragment(fragment) {
    for (let node of fragment.childNodes) {
      if (node.nodeType === 1) {
        this.buildElement(node);
        this.buildFragment(node);
      } else {
        this.buildText(node);
      }
    }
  }
  buildElement(node) {
    for (let attr of node.attributes) {
      let { name, value } = attr;
      if (name.startsWith("v-")) {
        const directive = name.split("-")[1];
        CompilerUtil[directive](node, value, this.vm);
      }
    }
  }
  buildText(node) {
    let content = node.textContent;
    const regexp = /\{\{.+?\}\}/gi;
    if (regexp.test(content)) {
      console.log("文本", content);
    }
  }
}

<div id="app">
  <input type="text" v-model="name" />
  <input type="text" v-model="time.h" />
  <p>{{ name }}</p>
</div>
<script>
  const vue = new Sue({
    el: "#app",
    data: {
      name: "书雁祉",
      age: 14,
      time: {
        h: 10,
        m: 20,
      },
    },
  });
</script>

Console

再用 v-html 和 v-text 示范，原理相似，分别修改元素的 innerHTML 和 innerText 为对应属性值。

const CompilerUtil = {
  GetValue(value, vm) {
    const realValue = value
      .split(".")
      .reduce((data, key) => data[key], vm.$data);
    return realValue;
  },
  model(node, value, vm) {
    node.value = this.GetValue(value, vm);
  },
  html(node, value, vm) {
    node.innerHTML = this.GetValue(value, vm);
  },
  text(node, value, vm) {
    node.innerText = this.GetValue(value, vm);
  },
};

<div id="app">
  <input type="text" v-model="name" />
  <input type="text" v-model="time.h" />
  <p>{{ name }}</p>
  <p v-html="html"></p>
  <p v-text="html"></p>
</div>
<script>
  const vue = new Sue({
    el: "#app",
    data: {
      name: "书雁祉",
      age: 14,
      time: {
        h: 10,
        m: 20,
      },
      html: "<div>a div</div>",
    },
  });
</script>

Console

Part 1就先示范这么多，等有闲情逸致了再写Part 2。