Vue2.x源码解读-模板编译_vue2 unsafe-eval-优快云博客

本文链接：https://blog.youkuaiyun.com/wsq_bsdn/article/details/114300958

模板编译作用
模板编译会将模板转换成返回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. '