Skip to content

当使用 codegen 中的 generate 函数时,会将 AST 转化为 render 字符串及 staticRenderFns 字符串数组。

为了满足实际执行,我们需要将 render 字符串及 staticRenderFns 字符串数组,对应的转化为 render 函数及 staticRenderFns 函数数组。

1.createFunction

将字符串转化为函数,是利用了 new Function(code) 的形式。

to-function.ts 中有以下核心代码:

js
function createFunction(code, errors) {
  try {
    return new Function(code)
  } catch (err: any) {
    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)

    // 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: any = {}
    const fnGenErrors: any[] = []
    res.render = createFunction(compiled.render, fnGenErrors)
    res.staticRenderFns = compiled.staticRenderFns.map(code => {
      return createFunction(code, fnGenErrors)
    })

    return (cache[key] = res)
  }
}