基于vue2实现一个简单的minVue

2021-08-19 (更新于2025-07-06)

字数统计: 4.1k字 | 阅读时长≈ 21分

基于 vue2 实现一个简单的可以双向绑定的 minVue

模版插值
数据劫持，变量更新
多依赖更新
实现 vue 指令， v-text，v-model，v-click

模版插值

首先实现模版编译的功能
对于 vue 的 option，我们只传入 el 和 data，其他的属性暂时我们不做处理，让 html 中的文本传值可以被 data 中的数据替换

<body>
  <div id="app">
    <p>{{msg}}</p>
    <p>{{count}}</p>
  </div>
</body>

new MinVue({
  el: "#app",
  data: {
    msg: "hello,mini vue.js",
    count: 666,
  },
});

此处我们只考虑元素中只有一个文本插值的情况

class MinVue {
  constructor(options) {
    this.$el = options.el;
    this.$data = options.data;

    // 编译模板
    new Compile(this);
  }
}

class Compile {
  constructor(object) {
    this.$el = object.$el;
    this.$data = object.$data;
    this.compile(document.querySelector(this.$el));
  }

  compile(el) {
    const childNodes = el.childNodes;

    Array.from(childNodes).forEach((node) => {
      if (this.isTextNode(node)) {
        this.compileTextNode(node);
      } else if (this.isElementNode(node)) {
        this.compileElement(node);
      }

      if (node.childNodes && node.childNodes.length) this.compile(node);
    });
  }

  isTextNode(node) {
    return node.nodeType === 3;
  }

  isElementNode(node) {
    return node.nodeType === 1;
  }

  compileTextNode(node) {
    // .+?正则懒惰匹配, 非贪婪匹配, 匹配花括号里面的内容
    // 只匹配第一个花括号，后续的不匹配（只考虑元素里面只有一个模版字符串的情况）
    const reg = /\{\{(.+?)\}\}/g;
    const text = node.textContent;

    if (reg.test(text)) {
      // 如果匹配成功, 获取第一个匹配的内容
      let key = RegExp.$1.trim();
      node.textContent = text.replace(reg, this.$data[key]);
    }
  }

  compileElement(node) {}
}

这样我们就实现了文本插入的功能，我们看一下完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{msg}}</p>
      <p>{{count}}</p>
    </div>
  </body>

  <script>
    class MinVue {
      constructor(options) {
        this.$el = options.el;
        this.$data = options.data;

        // 编译模板
        new Compile(this);
      }
    }

    class Compile {
      constructor(object) {
        this.$el = object.$el;
        this.$data = object.$data;
        this.compile(document.querySelector(this.$el));
      }

      compile(el) {
        const childNodes = el.childNodes;

        Array.from(childNodes).forEach((node) => {
          if (this.isTextNode(node)) {
            this.compileTextNode(node);
          } else if (this.isElementNode(node)) {
            this.compileElement(node);
          }

          if (node.childNodes && node.childNodes.length) this.compile(node);
        });
      }

      isTextNode(node) {
        return node.nodeType === 3;
      }

      isElementNode(node) {
        return node.nodeType === 1;
      }

      compileTextNode(node) {
        // .+?正则懒惰匹配, 非贪婪匹配, 匹配花括号里面的内容
        // 只匹配第一个花括号，后续的不匹配（只考虑元素里面只有一个模版字符串的情况）
        const reg = /\{\{(.+?)\}\}/g;
        const text = node.textContent;

        if (reg.test(text)) {
          // 如果匹配成功, 获取第一个匹配的内容
          let key = RegExp.$1.trim();
          node.textContent = text.replace(reg, this.$data[key]);
        }
      }

      compileElement(node) {}
    }

    new MinVue({
      el: "#app",
      data: {
        msg: "hello,mini vue.js",
        count: 666,
      },
    });
  </script>
</html>

数据劫持，变量更新

我们都知道 vue2 是通过 Object.defineProperty 来实现数据劫持的，我们也来实现一个简单的 observer

class MinVue {
  constructor(options) {
    this.$el = options.el;
    this.$data = options.data;

    new Observer(this.$data);

    // 编译模板
    new Compile(this);
  }
}

class Observer {
  constructor(data) {
    this.data = data;
    this.walk(data);
  }

  walk(data) {
    Object.keys(data).forEach((key) => {
      this.defineReactive(data, key, data[key]);
    });
  }

  defineReactive(obj, key, value) {
    Object.defineProperty(obj, key, {
      get() {
        return value;
      },
      set(newValue) {
        if (newValue !== value) {
          value = newValue;
        }
      },
    });
  }
}

这样我们就实现了数据劫持，接下来我们想一下，如何去实现数据代理的功能

首先我们想要在哪里去做依赖收集比较合适，那就是在compileTextNode方法里面，他会访问所有的文本插值的内容，所以我们可以在这里进行依赖收集。

dep = null;

class Observer {
  constructor(data) {
    this.data = data;
    this.walk(data);
  }

  walk(data) {
    Object.keys(data).forEach((key) => {
      this.defineReactive(data, key, data[key]);
    });
  }

  defineReactive(obj, key, value) {
    let updateCallBack = () => {};
    Object.defineProperty(obj, key, {
      get() {
        if (dep) {
          updateCallBack = dep;
        }
        return value;
      },
      set(newValue) {
        if (newValue !== value) {
          value = newValue;
          updateCallBack && updateCallBack(newValue);
        }
      },
    });
  }
}

compileTextNode(node) {
  // .+?正则懒惰匹配, 非贪婪匹配, 匹配花括号里面的内容
  // 只匹配第一个花括号，后续的不匹配（只考虑元素里面只有一个模版字符串的情况）
  const reg = /\{\{(.+?)\}\}/g;
  const text = node.textContent;

  if (reg.test(text)) {
    // 如果匹配成功, 获取第一个匹配的内容
    let key = RegExp.$1.trim();

    node.textContent = text.replace(reg, this.$data[key]);

    // 绑定数据更新
    dep = (newValue) => {
      console.log(newValue);
      node.textContent = newValue;
    };

    // 触发get方法
    console.log(this.$data[key]);
    dep = null;
  }
}

我们先使用一个全局变量 dep，用来存储依赖收集的回调函数，当数据发生改变时，我们可以调用这个回调函数来更新视图，我们在defineReactive方法里面进行依赖收集，当数据发生改变时，我们可以调用updateCallBack回调函数来更新视图。

我们此处先考虑依赖只有一个模版字符串的情况，所以我们dep只是一个变量，后续我们会考虑多个模版字符串的情况，所以我们dep是一个数组或类，用来存储多个回调函数。

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{msg}}</p>
      <p>{{count}}</p>
      <button type="button" onclick="increase()">add+</button>
    </div>
  </body>

  <script>
    function increase() {
      minVue.$data.count = minVue.$data.count + 1;
    }

    class MinVue {
      constructor(options) {
        this.$el = options.el;
        this.$data = options.data;

        new Observer(this.$data);

        // 编译模板
        new Compile(this);
      }
    }

    dep = null;

    class Observer {
      constructor(data) {
        this.data = data;
        this.walk(data);
      }

      walk(data) {
        Object.keys(data).forEach((key) => {
          this.defineReactive(data, key, data[key]);
        });
      }

      defineReactive(obj, key, value) {
        let updateCallBack = () => {};
        Object.defineProperty(obj, key, {
          get() {
            if (dep) {
              updateCallBack = dep;
            }
            return value;
          },
          set(newValue) {
            if (newValue !== value) {
              value = newValue;
              updateCallBack && updateCallBack(newValue);
            }
          },
        });
      }
    }

    class Compile {
      constructor(object) {
        this.$el = object.$el;
        this.$data = object.$data;
        this.compile(document.querySelector(this.$el));
      }

      compile(el) {
        const childNodes = el.childNodes;

        Array.from(childNodes).forEach((node) => {
          if (this.isTextNode(node)) {
            this.compileTextNode(node);
          } else if (this.isElementNode(node)) {
            this.compileElement(node);
          }

          if (node.childNodes && node.childNodes.length) this.compile(node);
        });
      }

      isTextNode(node) {
        return node.nodeType === 3;
      }

      isElementNode(node) {
        return node.nodeType === 1;
      }

      compileTextNode(node) {
        // .+?正则懒惰匹配, 非贪婪匹配, 匹配花括号里面的内容
        // 只匹配第一个花括号，后续的不匹配（只考虑元素里面只有一个模版字符串的情况）
        const reg = /\{\{(.+?)\}\}/g;
        const text = node.textContent;

        if (reg.test(text)) {
          // 如果匹配成功, 获取第一个匹配的内容
          let key = RegExp.$1.trim();

          node.textContent = text.replace(reg, this.$data[key]);

          // 绑定数据更新
          dep = (newValue) => {
            console.log(newValue);
            node.textContent = newValue;
          };
          // 触发get方法
          console.log(this.$data[key]);
          dep = null;
        }
      }

      compileElement(node) {}
    }
    let minVue = new MinVue({
      el: "#app",
      data: {
        msg: "hello,mini vue.js",
        count: 666,
      },
    });
  </script>
</html>

多个依赖的情况

如果我们有多个模版字符串的情况，比如有 2 个使用 count 的情况，就无法用一个 dep 去实现了，所以我们此处将 dep 改造成泪类，并把更新函数写到 Watch 类里面

<p>{{count}}</p>
<p>{{count}}</p>

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

  addWatcher(watcher) {
    this.watchers.push(watcher);
  }

  notify() {
    this.watchers.forEach((watcher) => watcher.update());
  }
}

class Watcher {
  constructor($data, key, cb) {
    Dep.target = this;
    this.key = key;
    this.cb = cb;
    // 此处调用get方法，触发get方法的defineProperty的get方法，将watcher添加到dep中
    this.$data = $data;
    this._old = $data[key];
    Dep.target = null;
  }

  update() {
    const newValue = this.$data[this.key];
    this.cb(newValue);
    this._old = newValue;
  }
}

compileTextNode中我们改造一下，使用 Watcher 方法去更新

compileTextNode(node) {
  // .+?正则懒惰匹配, 非贪婪匹配, 匹配花括号里面的内容
  // 只匹配第一个花括号，后续的不匹配（只考虑元素里面只有一个模版字符串的情况）
  const reg = /\{\{(.+?)\}\}/g;
  const text = node.textContent;

  if (reg.test(text)) {
    // 如果匹配成功, 获取第一个匹配的内容
    let key = RegExp.$1.trim();

    node.textContent = text.replace(reg, this.$data[key]);

    // 绑定数据更新
    new Watcher(this.$data, key, (newValue) => {
      node.textContent = newValue;
    });
  }
}

然后再把 Observer 中的代码更新为Dep类的方法

class Observer {
  constructor(data) {
    this.data = data;
    this.walk(data);
  }

  walk(data) {
    Object.keys(data).forEach((key) => {
      this.defineReactive(data, key, data[key]);
    });
  }

  defineReactive(obj, key, value) {
    const dep = new Dep();
    Object.defineProperty(obj, key, {
      get() {
        if (Dep.target) {
          dep.addWatcher(Dep.target);
        }
        return value;
      },
      set(newValue) {
        if (newValue !== value) {
          value = newValue;
          dep.notify();
        }
      },
    });
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{msg}}</p>
      <p>{{count}}</p>
      <p>{{count}}</p>
      <button type="button" onclick="increase()">add+</button>
    </div>
  </body>

  <script>
    function increase() {
      minVue.$data.count = minVue.$data.count + 1;
    }

    class MinVue {
      constructor(options) {
        this.$el = options.el;
        this.$data = options.data;

        new Observer(this.$data);

        // 编译模板
        new Compile(this);
      }
    }

    class Observer {
      constructor(data) {
        this.data = data;
        this.walk(data);
      }

      walk(data) {
        Object.keys(data).forEach((key) => {
          this.defineReactive(data, key, data[key]);
        });
      }

      defineReactive(obj, key, value) {
        const dep = new Dep();
        Object.defineProperty(obj, key, {
          get() {
            if (Dep.target) {
              dep.addWatcher(Dep.target);
            }
            return value;
          },
          set(newValue) {
            if (newValue !== value) {
              value = newValue;
              dep.notify();
            }
          },
        });
      }
    }

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

      addWatcher(watcher) {
        this.watchers.push(watcher);
      }

      notify() {
        this.watchers.forEach((watcher) => watcher.update());
      }
    }

    class Watcher {
      constructor($data, key, cb) {
        Dep.target = this;
        this.key = key;
        this.cb = cb;
        // 此处调用get方法，触发get方法的defineProperty的get方法，将watcher添加到dep中
        this.$data = $data;
        this._old = $data[key];
        Dep.target = null;
      }

      update() {
        const newValue = this.$data[this.key];
        this.cb(newValue);
        this._old = newValue;
      }
    }

    class Compile {
      constructor(object) {
        this.$el = object.$el;
        this.$data = object.$data;
        this.compile(document.querySelector(this.$el));
      }

      compile(el) {
        const childNodes = el.childNodes;

        Array.from(childNodes).forEach((node) => {
          if (this.isTextNode(node)) {
            this.compileTextNode(node);
          } else if (this.isElementNode(node)) {
            this.compileElement(node);
          }

          if (node.childNodes && node.childNodes.length) this.compile(node);
        });
      }

      isTextNode(node) {
        return node.nodeType === 3;
      }

      isElementNode(node) {
        return node.nodeType === 1;
      }

      compileTextNode(node) {
        // .+?正则懒惰匹配, 非贪婪匹配, 匹配花括号里面的内容
        // 只匹配第一个花括号，后续的不匹配（只考虑元素里面只有一个模版字符串的情况）
        const reg = /\{\{(.+?)\}\}/g;
        const text = node.textContent;

        if (reg.test(text)) {
          // 如果匹配成功, 获取第一个匹配的内容
          let key = RegExp.$1.trim();

          node.textContent = text.replace(reg, this.$data[key]);

          // 绑定数据更新
          new Watcher(this.$data, key, (newValue) => {
            node.textContent = newValue;
          });
        }
      }

      compileElement(node) {}
    }
    let minVue = new MinVue({
      el: "#app",
      data: {
        msg: "hello,mini vue.js",
        count: 666,
      },
    });
  </script>
</html>

这样我们就实现了多个依赖更新的情况

实现 vue 指令

实现 v-text

我们之前对非 text 节点没有作特殊处理，现在处理一下，实现 v-text 的功能

compileElement(node) {
  const attrs = node.attributes;

  if (attrs.length) {
    Array.from(attrs).forEach((attr) => {
      if (this.isDirective(attr.name)) {
        // 根据v-来截取一下后缀属性名
        let attrName = attr.name.indexOf(":") > -1 ? attr.name.substr(5) : attr.name.substr(2);
        let key = attr.value;

        this.update(node, attrName, key, this.$data[key]);
      }
    });
  }
}

isDirective(dir) {
  return dir.startsWith("v-");
}

update(node, attrName, key, value) {
  if (attrName === "text") {
    node.textContent = value;

    // 这里不再textnode处理， 所以我们要还是要做Watch的更新
    new Watcher(this.$data, key, (newValue) => {
      node.textContent = newValue;
    });
  }
}

在 html 中试一下，能够正常展示 😊

<p v-text="msg"></p>

v-model

然后我们实现 v-model

update(node, attrName, key, value) {
  if (attrName === "text") {
    node.textContent = value;
    new Watcher(this.$data, key, (newValue) => {
      node.textContent = newValue;
    });
  }

  if (attrName === "model") {
    node.value = value;
    new Watcher(this.$data, key, (newValue) => {
      node.value = newValue;
    });

    node.addEventListener("input", (e) => {
      this.$data[key] = node.value;
    });
  }
}

<input v-model="msg" />

可以正常使用

v-click

最后我们实现一下 v-click 指令

class Compile {
  constructor(object) {
    this.$el = object.$el;
    this.$data = object.$data;
    this.methods = object.methods; // 注册
    this.compile(document.querySelector(this.$el));
  }

  update(node, attrName, key, value) {
    if (attrName === "text") {
      node.textContent = value;
      new Watcher(this.$data, key, (newValue) => {
        node.textContent = newValue;
      });
    }

    if (attrName === "model") {
      node.value = value;
      new Watcher(this.$data, key, (newValue) => {
        node.value = newValue;
      });

      node.addEventListener("input", (e) => {
        this.$data[key] = node.value;
      });
    }

    if (attrName === "click") {
      node.addEventListener(attrName, this.methods[key].bind(this.$data));
    }
  }
}

class MinVue {
  constructor(options) {
    this.$el = options.el;
    this.$data = options.data;
    this.methods = options.methods;

    new Observer(this.$data);

    // 编译模板
    new Compile(this);
  }
}

let minVue = new MinVue({
  el: "#app",
  data: {
    msg: "hello,mini vue.js",
    count: 666,
  },
  methods: {
    increase() {
      this.count = this.count + 1;
    },
  },
});

<button type="button" v-click="increase">vue add+</button>

到这里，我们就实现了一个简单的 minVue 了，一起来看下最后的完整代码吧

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{msg}}</p>
      <p>{{count}}</p>
      <p>{{count}}</p>
      <p v-text="msg"></p>
      <input v-model="msg" />
      <button type="button" onclick="increase()">add+</button>
      <button type="button" v-click="increase">vue add+</button>
    </div>
  </body>

  <script>
    function increase() {
      minVue.$data.count = minVue.$data.count + 1;
    }

    class MinVue {
      constructor(options) {
        this.$el = options.el;
        this.$data = options.data;
        this.methods = options.methods;

        new Observer(this.$data);

        // 编译模板
        new Compile(this);
      }
    }

    class Observer {
      constructor(data) {
        this.data = data;
        this.walk(data);
      }

      walk(data) {
        Object.keys(data).forEach((key) => {
          this.defineReactive(data, key, data[key]);
        });
      }

      defineReactive(obj, key, value) {
        const dep = new Dep();
        Object.defineProperty(obj, key, {
          get() {
            if (Dep.target) {
              dep.addWatcher(Dep.target);
            }
            return value;
          },
          set(newValue) {
            if (newValue !== value) {
              value = newValue;
              dep.notify();
            }
          },
        });
      }
    }

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

      addWatcher(watcher) {
        this.watchers.push(watcher);
      }

      notify() {
        this.watchers.forEach((watcher) => watcher.update());
      }
    }

    class Watcher {
      constructor($data, key, cb) {
        Dep.target = this;
        this.key = key;
        this.cb = cb;
        // 此处调用get方法，触发get方法的defineProperty的get方法，将watcher添加到dep中
        this.$data = $data;
        this._old = $data[key];
        Dep.target = null;
      }

      update() {
        const newValue = this.$data[this.key];
        this.cb(newValue);
        this._old = newValue;
      }
    }

    class Compile {
      constructor(object) {
        this.$el = object.$el;
        this.$data = object.$data;
        this.methods = object.methods;
        this.compile(document.querySelector(this.$el));
      }

      compile(el) {
        const childNodes = el.childNodes;

        Array.from(childNodes).forEach((node) => {
          if (this.isTextNode(node)) {
            this.compileTextNode(node);
          } else if (this.isElementNode(node)) {
            this.compileElement(node);
          }

          if (node.childNodes && node.childNodes.length) this.compile(node);
        });
      }

      isTextNode(node) {
        return node.nodeType === 3;
      }

      isElementNode(node) {
        return node.nodeType === 1;
      }

      compileTextNode(node) {
        // .+?正则懒惰匹配, 非贪婪匹配, 匹配花括号里面的内容
        // 只匹配第一个花括号，后续的不匹配（只考虑元素里面只有一个模版字符串的情况）
        const reg = /\{\{(.+?)\}\}/g;
        const text = node.textContent;

        if (reg.test(text)) {
          // 如果匹配成功, 获取第一个匹配的内容
          let key = RegExp.$1.trim();

          node.textContent = text.replace(reg, this.$data[key]);

          // 绑定数据更新
          new Watcher(this.$data, key, (newValue) => {
            node.textContent = newValue;
          });
        }
      }

      compileElement(node) {
        const attrs = node.attributes;

        if (attrs.length) {
          Array.from(attrs).forEach((attr) => {
            if (this.isDirective(attr.name)) {
              // 根据v-来截取一下后缀属性名
              let attrName = attr.name.indexOf(":") > -1 ? attr.name.substr(5) : attr.name.substr(2);
              let key = attr.value;

              this.update(node, attrName, key, this.$data[key]);
            }
          });
        }
      }

      isDirective(dir) {
        return dir.startsWith("v-");
      }

      update(node, attrName, key, value) {
        if (attrName === "text") {
          node.textContent = value;
          new Watcher(this.$data, key, (newValue) => {
            node.textContent = newValue;
          });
        }

        if (attrName === "model") {
          node.value = value;
          new Watcher(this.$data, key, (newValue) => {
            node.value = newValue;
          });

          node.addEventListener("input", (e) => {
            this.$data[key] = node.value;
          });
        }

        if (attrName === "click") {
          node.addEventListener(attrName, this.methods[key].bind(this.$data));
        }
      }
    }
    let minVue = new MinVue({
      el: "#app",
      data: {
        msg: "hello,mini vue.js",
        count: 666,
      },
      methods: {
        increase() {
          this.count = this.count + 1;
        },
      },
    });
  </script>
</html>

本文作者： luckyship
本文链接： https://luckyship.github.io/2021/08/19/2021-08-19-min-vue/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！