Vue2.x源码解读-模板编译

最新推荐文章于 2025-10-20 10:36:11 发布

原创

最新推荐文章于 2025-10-20 10:36:11 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

模板编译作用
模板编译会将模板转换成返回VNode（虚拟DOM）的render函数。根据编译的时间不同分为运行时编译和构建时编译。.vue单文件组件将在webpack的构建过程中转换换乘render函数。
Vue Template Explore是一个在线将模板转换成render函数的工具。

模板编译入口

模板编译的入口在$mount方法中，在处理用户传入的template时，会将用户传入的template转化为render函数。在源码的src/platforms/web/entry-runtime-with-compiler.js文件中定义了这个处理过程。

模板编译的过程

在$mount方法中会调用compileToFunctions方法将template转化为render和staticRenderFns。

在compileToFunctions方法中主要会经过一下几个过程：

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. '