After triggering the lifecycle hook created, execute:

if (vm.$options.el) {
  vm.$mount(vm.$options.el);
}
Copy the code

The sentence after the execution, _init method (position in the SRC/core/instance/init. Js) end.

$mountThe paper

$mount(vm.$options.el) As mentioned earlier, the $mount method is platform-specific, so in this routine, $mount in entry-Runtime-with-Compiler.js is executed.

The main function of $mount is to compile to render and staticRenderFns according to the template in el or options.

buildrender

$options = {this.$options = {this.$options = {this.$options = {this.$options = {this.$options = {this.$options = {this. Render {getOuterHTML(el);} getOuterHTML(el) {getOuterHTML(el);

compileToFunctions

After getting template, execute:

var ref = compileToFunctions(
  template,
  {
    outputSourceRange: process.env.NODE_ENV ! = ='production'.shouldDecodeNewlines: shouldDecodeNewlines,
    shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
    delimiters: options.delimiters,
    comments: options.comments,
  },
  this
);
Copy the code

CompileToFunctions is curry function createCompileToFunctionFn (compile) the return value of main function is converting the template to render function.

Delimiters (options.delimiters); new Function(‘return 1’);

compile

var compiled = compile(template, options);
Copy the code

Compile is defined in createCompiler. This method first handles compileToFunctions’ options and baseOptions(from platform specific) configurations (warn, modules are merged, Directives) get finalOptions and then execute:

baseCompile
var compiled = baseCompile(template.trim(), finalOptions);
Copy the code

The baseCompile method performs three steps:

  • Parse Templates are parsed to ast

  • Optimize marks the static node, recursively calling the markStatic$1 and markStaticRoots methods, respectively, to get static and staticRoot properties of the static node flags mounted on the AST object. Static indicates that the node is a normal static node, staticRoot indicates that the node can be optimized, which comes from:

    if(node.static && node.children.length && ! (node.children.length ===1 && node.children[0].type === 3)) {
  node.staticRoot = true;
  return;
} else {
  node.staticRoot = false;
}
Copy the code

    StaticRoot is true if node.static is true and if it has more than one text child, which is used for optimization. If there is only one child text element, there is no need for optimization, which increases the cost.

  • Generate converts an AST into a render function that adds a static render to the staticRenderFns array if any of the tags Node.staticroot are true.

BaseCompile returns:

return {
  ast: ast,
  render: code.render,
  staticRenderFns: code.staticRenderFns,
};
Copy the code

Then compile returns:

return {
  ast: {type: 1.tag: "div".attrsList: Array(1), attrsMap: {... },rawAttrsMap: {... },... } render:"with(this){return _c('div',{attrs:{"id":"main"}..."
  staticRenderFns: []
  errors: []
  tips: []
};
Copy the code

After handling compilation errors, wrap function (createFunction) on render and staticRenderFns and cache the results so that they can be read directly from the cache if they are parsed to the same template again later.

Then compileToFunctions returns:

return {
  render: (a)= > {
    with (this) {
      return 'xxx'; }},staticRenderFns: [],};Copy the code

The template->render compilation process ends.

Execute the original in runtime$mountAnd mountComponent

Set render and staticRenderFns to vm.$options and execute:

return mount.call(this, el, hydrating);
Copy the code

$mount (as defined in /runtime/index);

mountComponent(this, el, hydrating);
Copy the code

In mountComponent (core/instance/lifecycle defined) in the original real el is assigned to the vm. The first $el, judge $options. The render the existence of relative error handling.

Triggers the beforeMount hook

callHook(vm, 'beforeMount');
Copy the code

Execute the lifecycle hook beforeMount, print vue beforeMount.

The summary of this chapter

  1. This chapter introducesvueperformbeforeMountStage;
  2. This phase mainly performs platform-specific tasks$mount, mainly generatedrenderFunctions;
  3. $mountaftercompileToFunctions -> compile -> baseCompilegetrender, includingbaseCompileThe execution of “will go through three phases;
  4. in$mountLast execution$mount(platform dependent), implemented in the methodmountComponentStart buildingvnodePhase.