vue源码分析(十六)核心函数之Compiler

2020-04-21  本文已影响0人  vue爱好者

我们上来先引用官方的一句话。

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。

整个Compiler代码特别多,我们就不把全部代码都帖出来了,我们从 vue源码分析(二)vue.js从何而来?能看到提过一下模板编译的事情。
我们接下来看看模板编译的核心代码,代码文件路径 src/compiler/index.js

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
  }
})

可以很清楚的看到主要是3个步骤:
1、parse (接收 template 原始模板,按照模板的节点 和数据 生成对应的 ast)
2、optimize (遍历递归每一个ast节点,标记静态的节点(没有绑定任何动态数据))
3、generate(生成可执行的函数)

上一篇 下一篇

猜你喜欢

热点阅读