• The mini-vue framework builds Part1 — the directory structure
  • The mini-vue framework builds Part2 — implements the data broker
  • Minivue framework builds Part4 — before Render

An overview of the

  • How do I add the $Mount method to the prototype chain of a Vue objectinitMout
  • Generate virtual DOM for real node, specific implementation methodcontrucVNode
  • Define the virtual Node Node class,VNode
  • $Mount method implementation overview

A link to the

  • PS: node node attributes and methods
  • PS: what is the value of nodeType

How do I add the $Mount method to the prototype chain of a Vue object

  • willinitMoutMethod, passing in a Vue object
    /** * Add the #mount method to the prototype chain@param {*} Vue* /
    export function initMout(Vue) {
      Vue.prototype.$mount = function (el) {
        const vm = this;
        this._el = el;
        mount(vm, el);
      };
    }
    
    /** * An implementation of the mount method *@param {*} vm
     * @param {*} El The real DOM */ corresponding to the mount node
    function mount(vm, el) {
      // Step 1: Build the virtual DOM
      const rootDom = getDom(el);
      vm._vnode = contrucVNode(vm, rootDom, null);

      // Step 2: Collect the mapping between DOM nodes and template syntax - to be implemented
      parpaerRender(vm, vm._vnode);
    }

Copy the code

Generate virtual DOM from real nodes

  • Every real DOM Node inherits the Node class, so it passesnodeNameYou know whether it’s an HTML tag type or a text type. (PS:Properties and methods of the Node class)
  • nodeTypeThe value of represents different meanings. Typically, 1 represents AN HTML tag and 3 represents a text tag (PS:What are the values for nodeType and what do they mean)
  • How does nodeName define the text type: the white space between two nodes and the actual text are both text types

    1. From the

      tag to the “text content” text is a text type #text

    2. The “text class” contains text before the tag is a text type #text

    3. {{content}} is a span type

         <div id="app"<span style = "max-width: 100%; clear: both; min-height: 1emclass="a">{{content}}</span> 
    </div>
Copy the code
  • The children property is the virtual DOM generated by the code block above

  • Code implementation

    /** * Build the virtual DOM@param {*} vm
     * @param {*} El The actual DOM node *@param {*} Parent Parent node */
    function contrucVNode(vm, el, parent) {
      const tag = el.nodeName;
      const children = []; // Virtual child nodes under the virtual DOM
      const text = getTextContent(el);
      const data = "";
      const nodeType = el.nodeType;

      const vnode = new VNode(tag, el, children, text, data, parent, nodeType);

      // Whether there are children under the real DOM node
      const childrenList = el.childNodes;

      for (let i = 0; i < childrenList.length; i++) {
        const childrenNode = contrucVNode(vm, childrenList[i], parent);
        if (childrenNode instanceofVNode) { vnode.children.push(childrenNode); }}return vnode;
    }

Copy the code

Define a virtual Node Node class

    export default class Vnode {
      / / the node node built-in properties and methods: https://developer.mozilla.org/en-US/docs/Web/API/Node
      / / the value of the nodeType: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
      constructor(
        tag, // Tag type, DIV, SPAN... #TEXT
        elm, // Corresponding to the real node, the real DOM will be manipulated according to this property later, such as data rendering
        children, // Virtual DOM under the current node
        text, // The current node contains the text
        data, // VNodeData
        parent, // Parent node
        nodeType // Node type
      ) {
        this.tag = tag;
        this.elm = elm;
        this.children = children;
        this.text = text;
        this.data = data;
        this.parent = parent;
        this.nodeType = nodeType;

        this.env = {}; // The environment variable of the current node
        this.instructions = null; // Store Due instructions, such as v-for
        this.template = []; // Template syntax for the current node -- like {{text}}}}Copy the code