• 如何给Vue对象的原型链增加$Mount办法initMout
  • 为实在节点生成虚构DOM，具体实现办法contrucVNode
  • 定义虚构Node节点类, VNode
  • $Mount办法实现概览

相干链接

  • PS： node节点的属性和办法
  • PS：nodeType的值有哪些，代表什么意思

如何给Vue对象的原型链增加$Mount办法

  • 将initMout办法导出，传入Vue对象

      /**   * 在原型链上增加#mount办法   * @param {*} Vue   */  export function initMout(Vue) {    Vue.prototype.$mount = function (el) {      const vm = this;      this._el = el;      mount(vm, el);    };  }

    将实在节点生成虚构DOM

  • 每个实在DOM节点都会继承Node类，所以通过nodeName能晓得是HTML标签类型还是文本类型。（PS：node类的属性和办法）
  • nodeType的值代表不同的含意，典型有1示意HTML标签，3示意文本标签（PS：nodeType的值有哪些，代表什么意思）

  • nodeName是怎么定义文本类型的：两个节点间的空白局部和理论的文字都是文本类型

    1. 从<div id="app">标签后开始到 “文本内容”这个文字前是一个文本类型#text
    2. "文本类容"文字到 <span>标签前 是一个文本类型#text
    3. <span class="a">{{content}}</span>是个SPAN类型
```js     <div id="app">        文本内容：<span class="a">{{content}}</span>     </div>```
  • children属性就是下面代码块生成的虚构DOM
  • 代码实现
    /**     *  构建虚构DOM     * @param {*} vm     * @param {*} el 实在的DOM节点     * @param {*} parent 父级节点     */    function contrucVNode(vm, el, parent) {      const tag = el.nodeName;      const children = []; // 虚构DOM下的虚构子节点      const text = getTextContent(el);      const data = "";      const nodeType = el.nodeType;      const vnode = new VNode(tag, el, children, text, data, parent, nodeType);      // 实在DOM节点下是否还有子节点      const childrenList = el.childNodes;      for (let i = 0; i < childrenList.length; i++) {        const childrenNode = contrucVNode(vm, childrenList[i], parent);        if (childrenNode instanceof VNode) {          vnode.children.push(childrenNode);        }      }      return vnode;    }

定义虚构Node节点类

    export default class Vnode {      // node节点的内置属性和办法：https://developer.mozilla.org/en-US/docs/Web/API/Node      // nodeType的值： https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType      constructor(        tag, // 标签类型， DIV、SPAN... #TEXT        elm, // 对应实在节点,前期会依据这个属性操作实在DOM，如数据渲染        children, // 以后节点下的虚构子节点(虚构DOM)        text, // 以后节点中文本内容        data, // VNodeData, 临时保留，暂无意义        parent, // 父级节点        nodeType // 节点类型      ) {        this.tag = tag;        this.elm = elm;        this.children = children;        this.text = text;        this.data = data;        this.parent = parent;        this.nodeType = nodeType;        this.env = {}; // 以后节点的环境变量        this.instructions = null; // 寄存Due指令，如v-for        this.template = []; // 以后节点波及到的模板语法——形如{{ text }}      }    }