Without further ado, above:

  1. Initialize the Vue, mount some static properties, and mix in some instances or methods with instance members.

  2. After initialization, the constructor is called, with the this._init method as the entry function to the VUE

  3. The first mount is in entry-runtime-with-compiler.js, which compiles the template into the render function, So we pass the render function to compileToFunctions, if template is not available then we pass the el as templates and if so we can fetch the render function via compileToFunctions(). Then put the result in options.render

    The second one is in runtime/index.js. MountComponent () will retrieve the EL, and execute mountComponent() for the runtime version.

  4. MountComponent () is defined in Instance \ lifecycle

    • First check if the Render option is present, if not, but the template is passed in, and in the development environment, a warning will be sent, mainly because the runtime version does not support the compiler
    • Then trigger beforeMount
    • Define updateComponent. There are two main methods: _render: render the virtual Dom, and _update: convert the virtual Dom to the real Dom
    • The WATCHER object is created, and the get method inside is called, which is where the updateComponent call is passed in
    • The _render method in updateComponent is either the render passed in by the user or the render generated by the compiled template, which of course returns vNode
    • While updateComponentThe update method calls _patchMethod to convert the virtual DOM to the real DOM and mount it to the page. The generated real DOM is mounted to $EL
    • Mounted is raised when wacther is created, and the Vue instance is returned