模板编译

• 模板编译的主要目的是将模板 (template) 转换为渲染函数 (render)

<div>
  <h1 @click="handler">title</h1>
  <p>some content</p>
</div>

• 渲染函数 render

render (h) {
  return h('div', [
    h('h1', { on: { click: this.handler} }, 'title'),
    h('p', 'some content')
  ])
}

• 模板编译的作用
  • Vue 2.x 使用 VNode 描述视图以及各种交互，用户自己编写 VNode 比较复杂
  • 用户只需要编写类似 HTML 的代码 - Vue 模板，通过编译器将模板转换为返回 VNode 的 render 函数
  • .vue 文件会被 webpack 在构建的过程中转换成 render 函数

体验模板编译的结果

• 带编译器版本的 Vue.js 中，使用 template 或 el 的方式设置模板

<div id="app">
   <h1>Vue<span>模板编译过程</span></h1>
   <p>{{ msg }}</p>
	 <comp @myclick="handler"></comp>
</div>
<script src="../../dist/vue.js"></script>
<script>
  Vue.component('comp', {
    template: '<div>I am a comp</div>'
  })
  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello compiler'
    },
    methods: {
      handler () {
        console.log('test')
      }
 		} 
  })
  console.log(vm.$options.render)
</script>

• 编译后 render 输出的结果

(function anonymous() {
  with (this) {
    return _c(
      "div",
      { attrs: { id: "app" } },
      [
        _m(0),
        _v(" "),
        _c("p", [_v(_s(msg))]),
        _v(" "),
        _c("comp", { on: { myclick: handler } }),
			],
			1
		); 
  }
});

• _c 是 createElement() 方法，定义的位置 instance/render.js 中
• 相关的渲染函数(_开头的方法定义)，在 instance/render-helps/index.js 中

// instance/render-helps/index.js
target._v = createTextVNode
target._m = renderStatic
// core/vdom/vnode.js
export function createTextVNode (val: string | number) {
  return new VNode(undefined, undefined, undefined, String(val))
}
// 在 instance/render-helps/render-static.js export function renderStatic (
  index: number,
  isInFor: boolean
): VNode | Array<VNode> {
  const cached = this._staticTrees || (this._staticTrees = [])
  let tree = cached[index]
  // if has already-rendered static tree and not inside v-for,
  // we can reuse the same tree.
  if (tree && !isInFor) {
    return tree
}
  // otherwise, render a fresh tree.
  tree = cached[index] = this.$options.staticRenderFns[index].call(
    this._renderProxy,
    null,
    this // for render fns generated for functional component templates
  )
  markStatic(tree, `__static__${index}`, false)
  return tree
 }

• 把 template 转换成 render 的入口 src\platforms\web\entry-runtime-with-compiler.js

Vue Template Explorer

• vue-template-explorer
  • Vue 2.6 把模板编译成 render 函数的工具
• vue-next-template-explorer
  • Vue 3.0 beta 把模板编译成 render 函数的工具

模板编译过程

• 解析、优化、生成

编译的入口

• src\platforms\web\entry-runtime-with-compiler.js

Vue.prototype.$mount = function (
  ......
// 把 template 转换成 render 函数
const { render, staticRenderFns } = compileToFunctions(template, {
    outputSourceRange: process.env.NODE_ENV !== 'production',
    shouldDecodeNewlines,
    shouldDecodeNewlinesForHref,
    delimiters: options.delimiters,
    comments: options.comments
  }, this)
  options.render = render
  options.staticRenderFns = staticRenderFns
  ......
)

• 调试 compileToFunctions() 执行过程，生成渲染函数的过程
  • compileToFunctions: src\compiler\to-function.js
  • complie(template, options):src\compiler\create-compiler.js
  • baseCompile(template.trim(), finalOptions):src\compiler\index.js

解析 - parse

• 解析器将模板解析为抽象语树 AST，只有将模板解析成 AST 后，才能基于它做优化或者生成代码字符串。
  • src\compiler\index.js

const ast = parse(template.trim(), options)
//src\compiler\parser\index.js
parse()

• 查看得到的 AST tree
• 结构化指令的处理
  • v-if 最终生成单元表达式

// src\compiler\parser\index.js 
// structural directives
// 结构化的指令
// v-for
processFor(element)
processIf(element)
processOnce(element)
// src\compiler\codegen\index.js
export function genIf (
  el: any,
  state: CodegenState,
  altGen?: Function,
  altEmpty?: string
): string {
  el.ifProcessed = true // avoid recursion
  return genIfConditions(el.ifConditions.slice(), state, altGen, altEmpty)
}
// 最终调用 genIfConditions 生成三元表达式

• v-if 最终编译的结果

ƒ anonymous( ){
  with(this){
    return _c('div',{attrs:{"id":"app"}},[
      _m(0),
      _v(" "),
      (msg)?_c('p',[_v(_s(msg))]):_e(),_v(" "),
      _c('comp',{on:{"myclick":onMyClick}})
],1) }
}

• v-if/v-for 结构化指令只能在编译阶段处理，如果我们要在 render 函数处理条件或循环只能使用 js 中的 if 和 for

Vue.component('comp', {
  data: () {
    return {
      msg: 'my comp'
} },
  render (h) {
    if (this.msg) {
      return h('div', this.msg)
    }
    return h('div', 'bar')
  }
})

优化 - optimize

• 优化抽象语法树，检测子节点中是否是纯静态节点
• 一旦检测到纯静态节点，例如:永远不会更改的节点
  • 提升为常量，重新渲染的时候不在重新创建节点
  • 在 patch 的时候直接跳过静态子树

export function optimize (root: ?ASTElement, options: CompilerOptions) {
  if (!root) return
  isStaticKey = genStaticKeysCached(options.staticKeys || '')
  isPlatformReservedTag = options.isReservedTag || no
// first pass: mark all non-static nodes. 
  // 标记非静态节点
  markStatic(root)
// second pass: mark static roots.
// 标记静态根节点
  markStaticRoots(root, false)
}
 

生成 - generate

// src\compiler\index.js
const code = generate(ast, options)
// src\compiler\codegen\index.js
export function generate (
  ast: ASTElement | void,
  options: CompilerOptions
): CodegenResult {
  const state = new CodegenState(options)
  const code = ast ? genElement(ast, state) : '_c("div")'
  return {
    render: `with(this){return ${code}}`,
    staticRenderFns: state.staticRenderFns
  }
}
// 把字符串转换成函数
// src\compiler\to-function.js
function createFunction (code, errors) {
  try {
    return new Function(code)
  } catch (err) {
    errors.push({ err, code })
    return noop
} }

组件化机制

• 组件化可以让我们方便的把页面拆分成多个可重用的组件
• 组件是独立的，系统内可重用，组件之间可以嵌套
• 有了组件可以像搭积木一样开发网页
• 下面我们将从源码的角度来分析 Vue 组件内部如何工作
  • 组件实例的创建过程是从上而下
  • 组件实例的挂载过程是从下而上

组件声明

• 复习全局组件的定义方式

Vue.component('comp', {
  template: '<h1>hello</h1>'
})

• Vue.component() 入口
  • 创建组件的构造函数，挂载到 Vue 实例的 vm.options.component.componentName =Ctor

// src\core\global-api\index.js
// 注册 Vue.directive()、 Vue.component()、Vue.filter() 
initAssetRegisters(Vue)
// src\core\global-api\assets.js
if (type === 'component' && isPlainObject(definition)) {
  definition.name = definition.name || id
  definition = this.options._base.extend(definition)
}
......
// 全局注册，存储资源并赋值
// this.options['components']['comp'] = Ctor this.options[type + 's'][id] = definition
// src\core\global-api\index.js
// this is used to identify the "base" constructor to extend all plain-
object
// components with in Weex's multi-instance scenarios.
Vue.options._base = Vue
// src\core\global-api\extend.js
Vue.extend()

• 组件构造函数的创建

 const Sub = function VueComponent (options) {
   // 调用 _init() 初始化
   this._init(options)
 }
 // 原型继承自 Vue
 Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub
Sub.cid = cid++
// 合并 options
Sub.options = mergeOptions(
  Super.options,
  extendOptions
)
Sub['super'] = Super

if (Sub.options.props) {
  initProps(Sub)
}
if (Sub.options.computed) {
  initComputed(Sub)
}

// allow further extension/mixin/plugin usage
Sub.extend = Super.extend
Sub.mixin = Super.mixin
Sub.use = Super.use

// create asset registers, so extended classes
// can have their private assets too.
ASSET_TYPES.forEach(function (type) {
  Sub[type] = Super[type]
})
// enable recursive self-lookup
// 把组件构造构造函数保存到 Ctor.options.components.comp = Ctor
if (name) {
  Sub.options.components[name] = Sub
}

组件创建和挂载

组件 VNode 的创建过程

• 创建根组件，首次 _render() 时，会得到整棵树的 VNode 结构
• 整体流程:new Vue() --> $mount() --> vm._render() --> createElement() --> createComponent()
• 创建组件的 VNode，初始化组件的 hook 钩子函数
  • 1. _createElement() 中调用 createComponent()

// src\core\vdom\create-element.js  
// 判断是否是 自定义组件
    } else if ((!data || !data.pre) &&
      isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // 查找自定义组件构造函数的声明
      // 根据 Ctor 创建组件的 VNode
      // component
      vnode = createComponent(Ctor, data, context, children, tag)

• 2. createComponent() 中调用创建自定义组件对应的 VNode

// src\core\vdom\create-component.js
export function createComponent (
  Ctor: Class<Component> | Function | Object | void,
  data: ?VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag?: string
): VNode | Array<VNode> | void {
  if (isUndef(Ctor)) {
    return
}
......
  // install component management hooks onto the placeholder node
// 安装组件的钩子函数 init/prepatch/insert/destroy
// 初始化了组件的 data.hooks 中的钩子函数 
installComponentHooks(data)
  // return a placeholder vnode
const name = Ctor.options.name || tag
// 创建自定义组件的 VNode，设置自定义组件的名字
// 记录this.componentOptions = componentOptions 
const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data, undefined, undefined, undefined, context,
    { Ctor, propsData, listeners, tag, children },
    asyncFactory
)
  return vnode
}

• 3. installComponentHooks() 初始化组件的 data.hook

function installComponentHooks (data: VNodeData) {
const hooks = data.hook || (data.hook = {})
// 用户可以传递自定义钩子函数
// 把用户传入的自定义钩子函数和 componentVNodeHooks 中预定义的钩子函数合并 
for (let i = 0; i < hooksToMerge.length; i++) {
    const key = hooksToMerge[i]
    const existing = hooks[key]
    const toMerge = componentVNodeHooks[key]
    if (existing !== toMerge && !(existing && existing._merged)) {
      hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge
    }
} }

• 4. 钩子函数定义的位置(init()钩子中创建组件的实例)

const componentVNodeHooks = {
  init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
    if (
      vnode.componentInstance &&
      !vnode.componentInstance._isDestroyed &&
      vnode.data.keepAlive
    ) {
      // kept-alive components, treat as a patch
      const mountedNode: any = vnode // work around flow
      componentVNodeHooks.prepatch(mountedNode, mountedNode)
    } else {
      const child = vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance
      )
      child.$mount(hydrating ? vnode.elm : undefined, hydrating)
    }
  },

  prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
    const options = vnode.componentOptions
    const child = vnode.componentInstance = oldVnode.componentInstance
    updateChildComponent(
      child,
      options.propsData, // updated props
      options.listeners, // updated listeners
      vnode, // new parent vnode
      options.children // new children
    )
  },

  insert (vnode: MountedComponentVNode) {
    const { context, componentInstance } = vnode
    if (!componentInstance._isMounted) {
      componentInstance._isMounted = true
      callHook(componentInstance, 'mounted')
    }
    if (vnode.data.keepAlive) {
      if (context._isMounted) {
        // vue-router#1212
        // During updates, a kept-alive component's child components may
        // change, so directly walking the tree here may call activated hooks
        // on incorrect children. Instead we push them into a queue which will
        // be processed after the whole patch process ended.
        queueActivatedComponent(componentInstance)
      } else {
        activateChildComponent(componentInstance, true /* direct */)
      }
    }
  },

  destroy (vnode: MountedComponentVNode) {
    const { componentInstance } = vnode
    if (!componentInstance._isDestroyed) {
      if (!vnode.data.keepAlive) {
        componentInstance.$destroy()
      } else {
        deactivateChildComponent(componentInstance, true /* direct */)
      }
    }
  }
}

• 5 .创建组件实例的位置，由自定义组件的 init() 钩子方法调用

export function createComponentInstanceForVnode (
  vnode: any, // we know it's MountedComponentVNode but flow doesn't
  parent: any, // activeInstance in lifecycle state
): Component {
  const options: InternalComponentOptions = {
    _isComponent: true,
    _parentVnode: vnode,
    parent
  }
  // check inline-template render functions
  // 获取 inline-template
  // <comp inline-template> xxxx </comp>
  const inlineTemplate = vnode.data.inlineTemplate
  if (isDef(inlineTemplate)) {
    options.render = inlineTemplate.render
    options.staticRenderFns = inlineTemplate.staticRenderFns
  }
  // 创建组件实例
  return new vnode.componentOptions.Ctor(options)
}

组件实例的创建和挂载过程

• Vue._update() --> patch() --> createElm() --> createComponent()
  • 1. 创建组件实例，挂载到真实 DOM

// src\core\vdom\patch.js  
function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
    let i = vnode.data
    if (isDef(i)) {
      const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
      if (isDef(i = i.hook) && isDef(i = i.init)) {
        // 调用 init() 方法，创建和挂载组件实例
        // init() 的过程中创建好了组件的真实 DOM,挂载到了 vnode.elm 上
        i(vnode, false /* hydrating */)
      }
      // after calling the init hook, if the vnode is a child component
      // it should've created a child instance and mounted it. the child
      // component also has set the placeholder vnode's elm.
      // in that case we can just return the element and be done.
      if (isDef(vnode.componentInstance)) {
        // 调用钩子函数（VNode的钩子函数初始化属性/事件/样式等，组件的钩子函数）
        initComponent(vnode, insertedVnodeQueue)
        // 把组件对应的 DOM 插入到父元素中
        insert(parentElm, vnode.elm, refElm)
        if (isTrue(isReactivated)) {
          reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
        }
        return true
      }
    }
  }

• 2.调用钩子函数，设置局部作用于样式

function initComponent (vnode, insertedVnodeQueue) {
    if (isDef(vnode.data.pendingInsert)) {
      insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert)
      vnode.data.pendingInsert = null
    }
    vnode.elm = vnode.componentInstance.$el
    if (isPatchable(vnode)) {
      // 调用钩子函数
      invokeCreateHooks(vnode, insertedVnodeQueue)
      // 设置局部作用于样式
      setScope(vnode)
    } else {
      // empty component root.
      // skip all element-related modules except for ref (#3455)
      registerRef(vnode)
      // make sure to invoke the insert hook
      insertedVnodeQueue.push(vnode)
    }
  }

• 3. 调用钩子函数

  function invokeCreateHooks (vnode, insertedVnodeQueue) {
    // 调用 VNode 的钩子函数
    for (let i = 0; i < cbs.create.length; ++i) {
      cbs.create[i](emptyNode, vnode)
    }
    i = vnode.data.hook // Reuse variable
    // 调用组件的钩子函数
    if (isDef(i)) {
      if (isDef(i.create)) i.create(emptyNode, vnode)
      if (isDef(i.insert)) insertedVnodeQueue.push(vnode)
    }
  }

简述

模板编译过程

• 模板编译前言
  • 把模板编译成render函数的过程
  • .vue文件的处理，是在开发环境，通过webpack打包编译为了render函数，使用的runtime模式
  • 编译模式是指template中声明的模板标签
  • template中可以使用v-for等指令，在render函数中得用js来实现
• 模板编译过程
  • 模板编译的$mount函数在完整版入口文件中
  • 先保留runtime中的$mount方法
  • 判断是有没有传递render函数
    • 如果有传递 则直接使用传递的render函数
  • 判断template的类型，并重新赋值template
    • 如果是字符串类型
      • 获取template的元素的innerHTML
    • 如果是dom元素
      • 获取元素的innerHTML
    • 如果有el属性
      • 获取el对应的outerHTML
    • 重新赋值获取的内容设置template
  • 通过compileToFunctions 函数 生成render 和staticRenderFns 方法
  • 通过createCompiler 函数生成compileToFunctions 方法
  • 通过createCompilerCreator 方法生成 compiler 和 createCompiler
  • 通过baseCompile 处理template和 options
    • 通过parse生成ast
    • 通过optimize优化静态节点
    • 通过generate生成可渲染的render和staicRenderFns函数
  • parse
    • 通过正则匹配元素
      • 开始结束节点
      • v-if等指令的处理
    • 生成ast树
  • 处理完得到render函数后，设置options.render 通过调用之前保留的$mount函数去执行
  • $mount中执行的过程和之前的渲染一样

组件化机制

• 通过Vue.component 进行声明组件
• Vue.component 会在全局设置静态api的的时候添加上改方法
• Vue.component 方法执行过程
  • 接受name参数，并进行去重校验
  • 执行Vue的extend方法，返回继承后的构造函数
  • 将component 挂载到Vue的options中
  • 返回一个definition
• 使用组件的过程
  • 通过render函数中h函数调用definition
  • 在createElement函数中会判断tag类型，通过createComponent来生成vnode
  • createComponent 执行处理组件的参数并创建生成vnode并标识当前节点为组件节点
  • render执行完成返回最终的vnode
  • 组件的vnode中没有children属性
  • 组件的挂载
    • 在__patch__中会执行createElm函数
    • 在createElm中会判断是否是component类型
      • 如果是执行createComponent函数，并调用init方法进行实例化组件
      • 实例化过程会执行$mount 并生成$el
      • 是则直接将组件的真实dom直接插入到父元素中
    • 先挂载子组件的内容
    • 子组件挂载完成后再挂载父组件
• 组件的更新
  • 组件进行patchVnode时，会判断当前vnode是否是component
    • 如果是component，执行component的prepatch
    • prepatch中将旧vnode的componentInstance设置到新的vnode中
    • 通过调用updateChildComponent触发setter,从而触发dep.notify
    • 接着执行watcher中传入的updateComponent方法
    • 触发组件内部的更新