仿写Vue（二）构造函数

二、构造函数MyVue

自己动手实践，就会更加深刻的理解

这次的主题：实现构造函数 MyVue。
在上一篇文章中，遗留了以下一些问题：

• 还没有整合成构造函数
• 无法替换形如 name.firstName 的层级属性
• 没有使用虚拟DOM

今天，主要解决一件事，实现构造函数 MyVue，并在其原型上添加 render, compiler, update 这三个方法。

01、实现构造函数 MyVue

（首先声明，实际的Vue会有所不同）

• 构造函数只能用 new 调用
• 获取到元素和数据
• 调用 render 函数

    function MyVue(options) {

      if (!this instanceof MyVue) {
        console.error('Vue is a constructor and should be called with the `new` keyword')
      }

      // 内部数据用 _ 开头，只读数据用 $ 开头
      this._data = options.data;
      this._el = options.el;

      // 准备模板与父节点
      this.$el = this._template = document.querySelector(this._el);
      this._parent = this._template.parentNode;
      // 开始渲染
      this.render();
    }

02、render 函数

其次，在 MyVue 的原型上添加 render 函数，目前还没有杂七杂八的生命周期函数，所以只需编译即可~

    MyVue.prototype.render = function () {
      this.compiler();
    }

03、compiler函数

最后，在 MyVue 的原型上添加 compiler 函数，内部调用之前写好的编译函数。

    /** 编译，得到真正的DOM */
    MyVue.prototype.compiler = function () {
      let newDOM = this._template.cloneNode(true);
      compiler(newDOM, this._data); // 这个函数在上一章中写到
      this._parent.replaceChild(newDOM, this._template);
    }

04、效果展示

html内代码如下

  <div id="root">
    <p>{{name}}</p>
    <p>{{message}}</p>
    <p>{{name}} -- {{message}}</p>
  </div>
  
    let app = new MyVue({
      el: '#root',
      data: {
        name: 'romeo',
        message: 'handsome but bad guy',
      }
    })

效果图：



更多源代码请看我的 github
欢迎关注我的公众号，查看更多系列文章~