vue2从template到render模板编译入口详解

2024-09-29 01:32:44

正文

在vue的渲染过程中，渲染核心逻辑是vm._update(vm._render(), hydrating)，通过vm._render的执行获取到vNode，再通过vm._update的执行来将vNode渲染成真实视图。

其中，render函数的来源是：

（1）用户手写；

（2）通过vue-loader引入的时候进行转换；

（3）通过compileToFunctions将template进行处理产生。

开发过程中主要以template的方式进行代码的编写，这里主要梳理compileToFunctions的方法。

1、template：模板获取

在src/platforms/web/entry-runtime-with-compiler.js中在vue的原型上定义了$mount：

const idToTemplate = cached(id => {
  const el = query(id)
  return el && el.innerHTML
})
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)
  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }
  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }
      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
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  return mount.call(this, el, hydrating)
}
/**
 * Get outerHTML of elements, taking care
 * of SVG elements in IE as well.
 */
function getOuterHTML (el: Element): string {
  if (el.outerHTML) {
    return el.outerHTML
  } else {
    const container = document.createElement('div')
    container.appendChild(el.cloneNode(true))
    return container.innerHTML
  }
}

在没有编写render时候才会去获取template并进行编译，获取方式有

在传入的参数中获取options.template
如果是真实节点则获取其innerHTML
以上都不满足则通过或者el.outerhTML的方式获取

获取到template后通过compileToFunctions的方式进行编译，这里是编译的入口。

2、createCompiler：核心参数

在src/platforms/web/compile/index.js中调用了createCompiler：

import { baseOptions } from './options'
import { createCompiler } from 'compiler/index'
const { compile, compileToFunctions } = createCompiler(baseOptions)
export { compile, compileToFunctions }

这里将baseOptions作为基础参数传入，在src/complile/index.js中定义了createCompiler：

import { parse } from './parser/index'
import { optimize } from './optimizer'
import { generate } from './codegen/index'
import { createCompilerCreator } from './create-compiler'
export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  const ast = parse(template.trim(), options)
  if (options.optimize !== false) {
    optimize(ast, options)
  }
  const code = generate(ast, options)
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})

这里定义了baseCompile核心参数，主要目的是进行ast的获取、ast的优化和code的拼接。并将baseCompile作为参数传入执行了createCompilerCreator：

export function createCompilerCreator (baseCompile: Function): Function {
  return function createCompiler (baseOptions: CompilerOptions) {
    function compile (
      template: string,
      options?: CompilerOptions
    ): CompiledResult {
      // ...
    }
    return {
      compile,
      compileToFunctions: createCompileToFunctionFn(compile)
    }
  }
}

createCompiler就是createCompilerCreator的返回函数，createCompiler中返回了compile和compileToFunctions，这里的compileToFunctions就是入口获取render的函数，由createCompileToFunctionFn(compile)执行获得。

再看createCompileToFunctionFn(compile)：

3、createCompileToFunctionFn：缓存处理

function createFunction (code, errors) {
  try {
    return new Function(code)
  } catch (err) {
    errors.push({ err, code })
    return noop
  }
}
export function createCompileToFunctionFn (compile: Function): Function {
  const cache = Object.create(null)
  return function compileToFunctions (
    template: string,
    options?: CompilerOptions,
    vm?: Component
  ): CompiledFunctionResult {
    options = extend({}, options)
    const warn = options.warn || baseWarn
    delete options.warn
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production') {
      // detect possible CSP restriction
      try {
        new Function('return 1')
      } catch (e) {
        if (e.toString().match(/unsafe-eval|CSP/)) {
          warn(
            'It seems you are using the standalone build of Vue.js in an ' +
            'environment with Content Security Policy that prohibits unsafe-eval. ' +
            'The template compiler cannot work in this environment. Consider ' +
            'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
            'templates into render functions.'
          )
        }
      }
    }
    // check cache
    const key = options.delimiters
      ? String(options.delimiters) + template
      : template
    if (cache[key]) {
      return cache[key]
    }
    // compile
    const compiled = compile(template, options)
    // ...
    // turn code into functions
    const res = {}
    const fnGenErrors = []
    res.render = createFunction(compiled.render, fnGenErrors)
    res.staticRenderFns = compiled.staticRenderFns.map(code => {
      return createFunction(code, fnGenErrors)
    })
    // check function generation errors.
    // this should only happen if there is a bug in the compiler itself.
    // mostly for codegen development use
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production') {
      if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) {
        warn(
          `Failed to generate render function:\n\n` +
          fnGenErrors.map(({ err, code }) => `${err.toString()} in\n\n$[code]\n`).join('\n'),
          vm
        )
      }
    }
    return (cache[key] = res)
  }
}

这里通过const cache = Object.create(null)的方式定义了缓存，返回的compileToFunctions函数中执行return (cache[key] = res)，通过闭包的方式进行了计算的重复利用。

如果当前环境支持new Function('return 1')则调用了createFunction将compiled.render通过new Function(code)进行可执行代码的转换，否则进行提示(放宽环境执行或预编译当前模板)。

再看const compiled = compile(template, options)：

4、compile:参数合并

function compile (
  template: string,
  options?: CompilerOptions
): CompiledResult {
  const finalOptions = Object.create(baseOptions)
  const errors = []
  const tips = []
  let warn = (msg, range, tip) => {
    (tip ? tips : errors).push(msg)
  }
  if (options) {
    if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
      // $flow-disable-line
      const leadingSpaceLength = template.match(/^\s*/)[0].length
      warn = (msg, range, tip) => {
        const data: WarningMessage = { msg }
        if (range) {
          if (range.start != null) {
            data.start = range.start + leadingSpaceLength
          }
          if (range.end != null) {
            data.end = range.end + leadingSpaceLength
          }
        }
        (tip ? tips : errors).push(data)
      }
    }
    // merge custom modules
    if (options.modules) {
      finalOptions.modules =
        (baseOptions.modules || []).concat(options.modules)
    }
    // merge custom directives
    if (options.directives) {
      finalOptions.directives = extend(
        Object.create(baseOptions.directives || null),
        options.directives
      )
    }
    // copy other options
    for (const key in options) {
      if (key !== 'modules' && key !== 'directives') {
        finalOptions[key] = options[key]
      }
    }
  }
  finalOptions.warn = warn
  const compiled = baseCompile(template.trim(), finalOptions)
  if (process.env.NODE_ENV !== 'production') {
    detectErrors(compiled.ast, warn)
  }
  compiled.errors = errors
  compiled.tips = tips
  return compiled
}

这里的参数就是入口处获取到的template，options就是入口处传入的用户参数

{ outputSourceRange: process.env.NODE_ENV !== 'production', shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters: options.delimiters, comments: options.comments }

然后进行平台参数和用户参数的合并。最后将合并后的参数传入并执行

const compiled = baseCompile(template.trim(), finalOptions)

小结

vue模板编译的真实入口是baseCompile，但是从Vue.prototype.$mount中的compileToFunctions方法开始进行了大量函数的嵌套，主要目的是通过闭包的方式进行缓存处理和平台参数与用户参数的合并。

以上就是vue2从template到render模板编译入口详解的详细内容，更多关于vue template render模板编译的资料请关注我们其它相关文章！

深入了解Vue3模板编译原理

目录 Parse Transform cacheHandlers hoistStatic prefixIdentifiers PatchFlags hoists type 变化 Codegen 代码生成模式静态节点帮助函数 helpers helpers 是怎么使用的呢? 如何生成代码? Vue 的编译模块包含 4 个目录: compiler-core compiler-dom // 浏览器 compiler-sfc // 单文件组件 compiler-ssr // 服务端渲染其中 com
关于vue-admin-template模板连接后端改造登录功能

首先修改统一请求路径为我们自己的登陆接口,在.env.development文件中 # base api VUE_APP_BASE_API = 'http://localhost:8081/api/dsxs/company' 打开登陆页面,src/views/login/index.vue <template> <div class="login-container"> <el-form ref="loginForm" :model=&
vue-admin-template解决登录和跨域问题解决

目录一.下载安装项目二.修改登录访问地址三.解决跨域问题一.下载安装项目 git地址:https://github.com/PanJiaChen/vue-admin-template.git 二.修改登录访问地址找到 .env.develpment文件 # just a flag ENV = 'development' # base api # VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = 'http://localhost:9001
vue3中的render函数里定义插槽和使用插槽

目录 render函数里定义插槽和使用插槽定义插槽定义有插槽的组件使用插槽 vue3 render函数小变动 render函数的参数 render函数签名 VNode属性格式 render函数里定义插槽和使用插槽 vue3中this.slots和vue2的区别 vue3:this.slots是一个{ [name: string]: (…args: any[]) => Array | undefined }的对象,每个具名插槽的内容都要通过函数调用.如v-slot:foo插槽分发的内容通过th
vue中template模板编译的过程全面剖析

目录简述过程 vue的渲染过程 parse parse过程总结 generate生成render函数简述过程 vue template模板编译的过程经过parse()生成ast(抽象语法树),optimize对静态节点优化,generate()生成render字符串之后调用new Watcher()函数,用来监听数据的变化,render 函数就是数据监听的回调所调用的,其结果便是重新生成 vnode. 当这个 render 函数字符串在第一次 mount.或者绑定的数据更新的时候,都会被调
VUE render函数使用和详解

目录前言 render的作用 render函数讲解 render和template的区别 render举例总结前言在平时编程时,大部分是通过template来创建html.但是在一些特殊的情况下,使用template方式时,就无法很好的满足需求,在这个时候就需要通过JavaScript 的编程能力来进行操作.此时,就到了render函数展示拳脚去时候了. render的作用官网示例入口在官网的这里示例中,使用组件,将相同的内容通过solt放进h1-h6的标签中,在使用传统方式时,代
详解vue中v-for和v-if一起使用的替代方法template

目录版本目标效果说明解决方法核心代码片段 Car.vue vue中v-for和v-if一起使用的替代方法template 版本 vue 2.9.6element-ui: 2.15.6 目标效果说明在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用解决方法选择性地渲染列表,例如根据某个特定属性(category )来决定不同展示渲染,使用计算属性computed 见https://www.jb51.net/article/24717
vue2从template到render模板编译入口详解

目录正文 1.template:模板获取 2.createCompiler:核心参数 3.createCompileToFunctionFn:缓存处理 4.compile:参数合并小结正文在vue的渲染过程中,渲染核心逻辑是vm._update(vm._render(), hydrating),通过vm._render的执行获取到vNode,再通过vm._update的执行来将vNode渲染成真实视图. 其中,render函数的来源是: (1)用户手写: (2)通过vue-loader引
template.js前端模板引擎使用详解

本文介绍了template.js前端模板引擎使用,分享给大家,具体如下: 下载地址:https://github.com/yanhaijing/template.js 作者编写的文档:https://github.com/yanhaijing/template.js/blob/master/README.md 源码学习默认的开始标签和结束标签分别是: sTag: '<%',//开始标签,可以重写,我项目中使用的是<: eTag: '%>',//结束标签,我项目中使用的是:> 快速
何时/使用 Vue3 render 函数的教程详解

什么是 DOM? 如果我们把这个 HTML 加载到浏览器中,浏览器创建这些节点,用来显示网页.所以这个HTML映射到一系列DOM节点,然后我们可以使用JavaScript进行操作.例如: let item = document.getElementByTagName('h1')[0] item.textContent = "New Heading" VDOM 网页可以有很多DOM节点,这意味着DOM树可以有数千个节点.这就是为什么我们有像Vue这样的框架,帮我们干这些重活儿,并进行大量
Django视图层与模板层实例详解

目录 theme: channing-cyan 网页伪静态视图层 1.视图函数的返回值问题 2.视图函数返回json格式数据 3.form表单携带文件数据 4.FBV与CBV 5.CBV源码分析模板层 1.模板语法传值 2.模板语法传值的范围 3.模板语法值过滤器 4.模板语法标签(类似于python中的流程控制) 5.自定义标签函数.过滤器.inclusion_tag 6.模板的继承 7.模板的导入 theme: channing-cyan 网页伪静态将动态网页伪装成静态网页,可以提升网
C++印刷模板使用方法详解

目录一.泛型编程二.模板(初阶) 1.函数模板 1.单参数类型 2.多参数类型 3.模板函数和自定义函数 2.类模板 3.模板不支持分离编译在了解string之前,我们需要了解模板等等的一些铺垫知识,让我们开始吧! 一.泛型编程泛型编程是什么意思呢?我们通过下面的例子来具体了解: void Swap(int& left, int& right) { int temp = left; left = right; right = temp; } void Swap(double&
Android开发之Android.mk模板的实例详解

Android开发之Android.mk模板的实例详解关于Android NDK开发的文章已经比较多了,我的博客中也分享了很多NDK开发相关经验和技巧,今天简单写了一个 Android.mk 的示例模板,供初学者参考. 本模板主要给大家示例 Android NDK 开发中的如下几个问题: 1. 如何自动添加需要编译的源文件列表 2. 如何添加第三方静态库.动态库的依赖 3. 如何构造一个完整的NDK工程框架假设我们的项目依赖 libmath.a, libjson.a, libffmp
vue2中引用及使用 better-scroll的方法详解

使用时有三个要点: 一:html部分 <div class="example" ref="divScroll"> <div> <p>内容1</p> <p>内容2</p> <ul> <li>list1</li> <li>list2</li> <ul> </div> </div> [注] 1.最外层加re
idea的easyCode的 MybatisPlus模板的配置详解

EasyCode 插件 EasyCode 插件是一款根据表结构生成代码的很方便的Idea插件, 强烈推荐. 并且可以自定义模板来控制生成的类我在使用的过程中发现一些问题,现在把解决办法记录下来, 我主要使用的是插件自带的mybatisplus模板 1. 生成的代码中有大量的get set方法 lombok 插件是个好东西, 我删除了模板中的get和set方法, 添加了lombok 的注解, ' 2. 如果数据库中的表都有前缀"t_" 导致生成的类名中都有一个前缀 "T&
IDEA2020.3.2版本自动注释类和方法注释模板配置步骤详解

想来大家在学习或者开发的环境下经常要自己注解类和方法吧:下面我来为大家讲解怎么创建自己的注解模板: 一.配置类自动注解 1.打开idea file–>Settings–> 2.按照下图的步骤:直接搜索file and code–>导航栏点击File and Code Templates–>点击files文件类型–>然后选择Class文件模板在里面编辑自己想要的模板–>点击apply应用一下–>点击ok.如果还要设置方法模板的话先别急着点ok. 类注解代码片:根据自
C++函数模板的使用详解

函数模板可以适用泛型来定义函数,其中泛型可以是(int, double, float)等替换.在函数重载过程中,通过将类型作为参数传递给模板,可使编译器自动产生该类型的函数. 工作原理:比如需要定义一个比大小的max函数,有三种类型的数据(int,double,float),可能就需要编写三个函数,这样既浪费时间,且容易出错.如: #include <iostream> using namespace std; int Max(int a, int b); double Max(double