Vue 进阶 [九] Vue 源码剖析03 模板编译 & 组件化机制

约定不等于承诺〃 2022-12-16 13:07 118阅读 0赞

> 业精于勤 荒于嬉

# 模板编译 #

## 概述 ##

模板编译的主要目标是将**模板（template）转换为渲染函数（render）**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

template => render()

## 模板编译的必要性 ##

Vue 2.0 需要用到VNode 描述视图以及各种交互，手写显然不切实际，因此用户需要编写类似HTML 代码的Vue模板，通过编译器将模板转换为可返回VNode 的 render 函数。

## 整体流程 ##

如果用户设置了template 或者是el 选项，最终就会执行编译函数，**compileToFunctions**

若指定 template 或 el 选项，则会执行编译， **platforms\\web\\entry-runtime-with-compiler.js**

**编译过程**

编译分为三步：解析 ，优化，生成; **src\\compiler\\index.js**

export const createCompiler = createCompilerCreator(function baseCompile(
      template: string,
      options: CompilerOptions
    ): CompiledResult {
      // 1、解析：将模板转换为对象 AST（抽象语法树）
      const ast = parse(template.trim(), options)
      //2、标记静态节点（页面中不会变的地方）
      if (options.optimize !== false) {
        optimize(ast, options)
      }
      //3、代码生成 转换 ast 为代码字符串 new Function(code) 这样就可以得到一个真正的render 函数了
      const code = generate(ast, options)
      return {
        ast,
        render: code.render,
        staticRenderFns: code.staticRenderFns
      }
    })

**解析-parse**

解析器将模板解析为抽象语法树，基于AST可以做优化或者代码生成工作。

调试查看得到的AST， /src/compiler/parser/index.js， 结构如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1][]

解析器内部分了 **HTML** **解析器** 、 **文本解析器** 和 **过滤器解析器** ，最主要是 HTML 解析器

**优化-optimize**

优化器的作用是在AST中找出静态子树并打上标记。静态子树是在AST中永远不变的节点，如纯文本节点

标记静态子树的好处：

*  每次重新渲染，不需要为静态子树创建新节点
 *  虚拟DOM 中 patch 时，可以跳过静态子树

代码实现，src/compiler/optimizer.js - optimize

标记结束：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 2][]

**代码生成** **- generate**

**将AST 转换成渲染函数中的内容，即代码字符串。**

generate方法生成渲染函数代码，src/compiler/codegen/index.js

生成的代码形如

> \`\_c('div',\{attrs:\{"id":"demo"\}\},\[  
> \_c('h1',\[\_v("Vue.js测试")\]),  
> \_c('p',\[\_v(\_s(foo))\])  
> \])\`

其中 几个关键指令的解析 如 v-if v-for 的解析生成

// 关键指令解析
          if (inVPre) {
            processRawAttrs(element)
          } else if (!element.processed) {
            // structural directives
            processFor(element)
            processIf(element)
            processOnce(element)
          }

export function genElement (el: ASTElement, state: CodegenState): string {
      if (el.parent) {
        el.pre = el.pre || el.parent.pre
      }
    
      if (el.staticRoot && !el.staticProcessed) {
        return genStatic(el, state)
      } else if (el.once && !el.onceProcessed) {
        return genOnce(el, state)
      } else if (el.for && !el.forProcessed) {
        return genFor(el, state)
      } else if (el.if && !el.ifProcessed) {
        return genIf(el, state)
      } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
        return genChildren(el, state) || 'void 0'
      } else if (el.tag === 'slot') {
        return genSlot(el, state)
      } else {
        // component or element
        let code
        if (el.component) {
          code = genComponent(el.component, el, state)
        } else {
          let data
          if (!el.plain || (el.pre && state.maybeComponent(el))) {
            data = genData(el, state)
          }
    
          const children = el.inlineTemplate ? null : genChildren(el, state, true)
          code = `_c('${el.tag}'${
            data ? `,${data}` : '' // data
          }${
            children ? `,${children}` : '' // children
          })`
        }
        // module transforms
        for (let i = 0; i < state.transforms.length; i++) {
          code = state.transforms[i](el, code)
        }
        return code
      }
    }

# **组件化机制**  #

## **组件声明**  ##

**Vue.component()**

**initAssetRegisters(Vue) src/core/global-api/assets.js**

组件注册使用extend方法将配置转换为构造函数并添加到components选项

##    **组件实例创建及挂载**  ##

### **整体流程**  ###

首先创建的是根组件，首次 \_render() 时，会得到整棵树的 VNode 结构

整体流程： new Vue() => $mount() => vm.\_render() => createElement() => createComponent() =》  patch = 》 createElm = 》  createComponent()

### **创建自定义组件****VNode** ###

let vnode, ns
      if (typeof tag === 'string') {
        let Ctor
        ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
        if (config.isReservedTag(tag)) {
          // platform built-in elements
          if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
            warn(
              `The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
              context
            )
          }
          vnode = new VNode(
            config.parsePlatformTagName(tag), data, children,
            undefined, undefined, context
          )
        } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
          // component
          vnode = createComponent(Ctor, data, context, children, tag)
        } else {
          // unknown or unlisted namespaced elements
          // check at runtime because it may get assigned a namespace when its
          // parent normalizes children
          vnode = new VNode(
            tag, data, children,
            undefined, undefined, context
          )
        }
      } else {
        // direct component options / constructor
        vnode = createComponent(tag, data, context, children)
      }
      if (Array.isArray(vnode)) {
        return vnode
      } else if (isDef(vnode)) {
        if (isDef(ns)) applyNS(vnode, ns)
        if (isDef(data)) registerDeepBindings(data)
        return vnode
      } else {
        return createEmptyVNode()
      }
    }

**\_createElement src\\core\\vdom\\create-element.js**

**\_createElement实际执行VNode创建的函数，由于传入tag是非保留标签，因此判定为自定义组件通过createComponent去创建**

createComponent  **src/core/vdom/create-component.js**

创建组件 VNode ，保存了上一步处理得到的组件构造函数， props ，事件等

> 注意组件钩子安装和组件tag指定规则

### **创建自定义组件实例** ###

根组件执行更新函数时，会递归创建子元素和子组件，入口createElm

createEle() core/vdom/patch.js

首次执行\_update()时，patch()会通过createEle()创建根元素，子元素创建研究从这里开始

**createComponent core/vdom/patch.js**

// 组件实例创建、挂载
          if (isDef(i = i.hook) && isDef(i = i.init)) {
            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.elm 元素属性创建等
            initComponent(vnode, insertedVnodeQueue)
            // 插入到父元素
            insert(parentElm, vnode.elm, refElm)
            if (isTrue(isReactivated)) {
              reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
            }
            return true
          }

**注：**

***组件创建顺序 自上而下***

***组件挂载顺序 自下而上***

# 总结 #

Vue 源码的学习进阶目前先到这里，还需要自己在多看多分析多尝试，Vue源码的学习使我们能够深入理解原理，解答很多开发中的疑惑、规避很多潜在的错误，写出更好的代码。学习大神的代码，能够学习编程思想，设计模式，训练基本功能，提升内里。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 3][]

> 人生当自勉 学习需坚持

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221123/fa2c36024a2a43e2a90043bcf1faa297.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/f6ac5a9e5e61411b9ed62435dfbc64a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 2]: /images/20221123/9a1f390c8fdf4dbcb0cb0344adf80732.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 3]: /images/20221123/cad523d5ae5c436a84826cc59657387d.png