摘要：首先在里調(diào)用函數(shù)把獲取相應(yīng)傳遞過去里在原型上定義方法對瀏覽器的怪癖做兼容布爾值。對瀏覽器的怪癖做兼容布爾值。

首先在init.js里調(diào)用$mount函數(shù)
把el #app獲取相應(yīng)dom傳遞過去

Vue.prototype._init = function (options) {
   ...
   if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }   
}

entry-runtime-with-compiler.js里在Vue原型上定義$mount方法

Vue.prototype.$mount = function (
  el,
  hydrating
) { 
       let template = options.template
       template = idToTemplate(template)
       const { render, staticRenderFns } = compileToFunctions(template , {
        shouldDecodeNewlines, // 對瀏覽器的怪癖做兼容,布爾值。
        shouldDecodeNewlinesForHref, // 對瀏覽器的怪癖做兼容,布爾值。
        delimiters: options.delimiters, //vue透傳
        comments: options.comments //vue透傳
      }, this)
 } 

template(64)和 render(72), staticRenderFns(73) 對應(yīng)圖中所示

render是渲染函數(shù)，staticrenderfns是靜態(tài)樹的渲染函數(shù)

//render
function anonymous(
) {
with(this){return _c("div",[_c("h1",{staticStyle:{"color":"red"}},[_v("我是選項模板3")]),_v(" "),_c("p",[_v(_s(number))]),_v(" "),_c("p",[_v(_s(message))]),_v(" "),_m(0)])}
}  
//staticrenderfns
function anonymous(
) {
with(this){return _c("div",[_c("div",[_v("
          1
          "),_c("div",[_v("11")]),_v(" "),_c("div",[_v("12")])]),_v(" "),_c("div",[_v("2")]),_v(" "),_c("div",[_v("3")]),_v(" "),_c("div",[_v("4")]),_v(" "),_c("div",[_v("5")])])}
}

//template

children多的放進了staticrenderfns 其余的放進了render 至于為什么這么做,傳送門
從ast到render過程

compileToFunctions來源
platform文件下 compiler文件 index.js文件

const { compile, compileToFunctions } = createCompiler(baseOptions)

createCompiler來源
core文件下 compiler文件 index.js文件

export const createCompiler = createCompilerCreator(function baseCompile (
  template,
  options
) {
  // 使用 parse 函數(shù)將模板解析為 AST
  const ast = parse(template.trim(), options)
 
  // ast對象進行優(yōu)化，找出ast對象中所有靜態(tài)子樹
  if (options.optimize !== false) {
    optimize(ast, options)
  }
  // 根據(jù)給定的AST生成最終的目標平臺的代碼
  const code = generate(ast, options)
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})

createCompilerCreator來源
creact-compiler.js下

export function createCompilerCreator (baseCompile) {
  return function createCompiler (baseOptions) {
    function compile (
      template,
      options
    ) {
      const finalOptions = Object.create(baseOptions)
    // 執(zhí)行createCompilerCreator里傳來的函數(shù) 生生ast等
      const compiled = baseCompile(template, finalOptions)
      compiled.errors = errors
      compiled.tips = tips
      return compiled
    }

    return {
      compile,
      compileToFunctions: createCompileToFunctionFn(compile)
    }
  }
}

compiled如下即

 return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
compiled.errors = errors
compiled.tips = tips

總之,在$mount原型函數(shù)里面$mount
給 vue.options 掛載了 render和staticRenderFns
options.render = render
options.staticRenderFns = staticRenderFns

打印 options

掛在后需要渲染

lifecycle.js

mountComponent(){
   callHook(vm, "beforeMount")
   updateComponent = () => {
      vm._update(vm._render(), hydrating)
   }
   // 把更新組件加入依賴
   new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, "beforeUpdate")
      }
    }
  }, true /* isRenderWatcher */)
}

vm._render()生成傳說中的VNode,即虛擬dom

vm._render()執(zhí)行函數(shù)結(jié)果

vm._update方法的實現(xiàn)

 Vue.prototype._update = function (vnode, hydrating) {
   // 判斷vnode是否初始化過
    if (!prevVnode) {
      // initial render
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
  }

通過__patch__更新

在 platform/web/runtime/index.js文件里執(zhí)行了mountComponent方法

import { mountComponent } from "core/instance/lifecycle"


Vue.prototype.$mount = function (
  el,
  hydrating
) {
  el = el && inBrowser ? query(el) : undefined
  // 調(diào)用mountComponent方法
  return mountComponent(this, el, hydrating)
}

最終效果圖