Vue 模板编译器简介

Question

vue-template-compiler 用于将 Vue 模板和 单文件组件 编译成 JavaScript。 大多数开发人员不直接使用 vue-template-compiler。 但是像 用于 Webpack 的 vue-loader 之 使用 vue-template-compiler 来完成实际编译的繁重工作 .vue 文件。

vue-template-compiler 有两个主要功能：将模板转换为 render() 函数 和 解析单个文件组件 。

编译模板以 渲染函数

Vue 模板只是一个普通的字符串。 Vue 模板编译器的 compile() 函数转换一个模板字符串，您可以将其用作 render() 为您的组件提供功能。

const compiler = require('vue-template-compiler');
const { renderToString } = require('vue-server-renderer').createRenderer();

// Compile a `render()` function based on a string template
const { render } = compiler.compileToFunctions('<h1>Hello, {{message}}</h1>');

Vue.component('hello', {
  props: ['message'],
  render
});

const app = new Vue({
  template: '<hello message="World"></hello>'
});

// <h1 data-server-rendered="true">Hello, World</h1>
const data = await renderToString(app);

解析一个 .vue 文件

Vue-template-compiler 有一个单独的函数，叫做 parseComponent() 这可以帮助您编译单个文件组件（ .vue 文件）转换成 JavaScript。

const compiler = require('vue-template-compiler');
const parsed = compiler.parseComponent(`
  <template>
    <h1>{{message}}</h1>
  </template>
  <script>
    module.exports = {
      data: () => ({ message: 'Hello World' })
    };
  </script>
`);

// Contains `template`, `data` properties
const appComponent = Object.assign({ template: parsed.template.content },
  eval(parsed.script.content));
Vue.component('app', appComponent);
const app = new Vue({
  template: '<app></app>'
});

const data = await renderToString(app);
// <h1 data-server-rendered="true">Hello World</h1>
data;