创建Vue组件的7种方式

在定义 Vue 中的组件模板时，有很多选择。据我统计，至少有七种不同的方式！‎

‎在本文中，我们将浏览每个示例，并分析利弊，以便您知道在任何特定情况下最好使用哪一个。‎

‎内容列表：‎

• ‎普通字符串‎
• ‎模板字面‎
• x-template‎
• ‎内联模板‎
• ‎渲染功能‎
• ‎JSX‎
• ‎单文件组件‎
• ‎获胜者是...‎

定义 Vue 组件模板的最快和最简单的方法是将属性添加到组件定义中，并分配包含标记的常规字符串。‎template

‎这种方法实际上只用于代码示例或快速原型，但是，因为它很难与任何超越最简单的模板工作。‎

Vue.component('my-checkbox', {
  template: '<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title">{{ title }}</div></div>',
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});

Runtime template compiler: ‎Vue 附带一个内部模块，用于在运行时将 HTML 模板编译到 JavaScript。如果您使用在‎‎运行时‎‎不使用 HTML 标记的模板选项，您可以使用 Vue 的特殊构建.js该模块不包括此模块（因此，它更小、更快）。‎

 

模板字面‎

‎从 ES2015 开始，可以使用背签来声明一种称为‎‎模板字面‎‎的特殊字符串。与常规字符串不同，这些字符串允许嵌入式表达式，并且可以是多行的。‎

‎多行功能使这些功能比常规字符串更有助于定义组件模板，因为它们使标记更具可读性。‎

Vue.component('my-checkbox', {
  template: `
    <div class="checkbox-wrapper" @click="check">
      <div :class="{ checkbox: true, checked: checked }"></div>
      <div class="title">{{ title }}</div>
    </div>
  `,
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});

详情:

• 应用于HTML还是JS? JS
• 是否需要polyfill（补丁）或 transpile（转译器）? 是
• 是否需要运行时模板编译器? 是

‎较旧的浏览器可能不支持此 ES2015 功能，因此，尽管您可能需要‎‎转录‎‎代码以确保安全。‎

x-template

‎使用此方法，您的模板在‎‎索引.html‎‎文件中的脚本标记中定义。脚本标记被赋予类型，并在组件定义中通过 ID 引用。‎text/x-template

‎有利的一面是，此方法允许您在 HTML 文件中写入模板标记。缺点是，它把模板与组件定义的其余部分分开，因此它可能有点难以推理。‎

Vue.component('my-checkbox', {
  template: '#checkbox-template',
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});

 

<div id="app">...</div>
<script type="text/x-template" id="checkbox-template">
  <div class="checkbox-wrapper" @click="check">
    <div :class="{ checkbox: true, checked: checked }"></div>
    <div class="title">{{ title }}</div>
  </div>
</script>

详情:

• 应用于HTML还是JS? HTML
• 是否需要polyfill（补丁）或 transpile（转译器）? 否
• 是否需要运行时模板编译器? 是

Inline templates

使用此方法，您可以在父模板中定义组件的模板。只需务必添加属性，以便 Vue 知道在哪里可以找到它。‎inline-template

‎该方法的优点和缺点与 x 模板大致相同。一个有趣的区别是，由于模板可以在文档主体中定义，内容可以为 SEO 进行爬行。‎

Vue.component('my-checkbox', {
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});

<div id="app">
  ...
  <my-checkbox inline-template>
    <div class="checkbox-wrapper" @click="check">
      <div :class="{ checkbox: true, checked: checked }"></div>
      <div class="title">{{ title }}</div>
    </div>
  </my-checkbox>
</div>

详情:

• 应用于HTML还是JS? HTML
• 是否需要polyfill（补丁）或 transpile（转译器）? 否
• 是否需要运行时模板编译器? 是

‎内联模板和 x 模板可以与后端框架中的模板引擎（例如 Laravel Blade）配合工作。‎

渲染功能‎

‎渲染功能要求您使用纯 JavaScript 定义模板。你需要阅读‎‎Vue文档‎‎的确切语法，但粗略的想法是，你定义模板节点通过调用。‎createElement(tag, options, childElements)

‎这样做的好处是，它不需要任何形式的汇编，并让您完全访问 JavaScript 功能，而不是指令提供的内容。例如，要在标记模板内重做，您只能使用，但在 JavaScript 中，您可以使用任何阵列方法。‎v-for

‎然而，渲染功能远比其他模板选项更冗长和抽象，我不指望很多人会喜欢写这样的整个应用程序。‎

Vue.component('my-checkbox', {
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  },
  render(createElement) {
    return createElement(
      'div', {
        attrs: {
          'class': 'checkbox-wrapper'
        },
        on: {
          click: this.check
        }
      },
      [
        createElement(
          'div', {
            'class': {
              checkbox: true,
              checked: this.checked
            }
          }
        ),
        createElement(
          'div', {
            attrs: {
              'class': 'title'
            }
          },
          [this.title]
        )
      ]
    );
  }
});

 

详情:

• 应用于HTML还是JS?JS
• 是否需要polyfill（补丁）或 transpile（转译器）? 否
• 是否需要运行时模板编译器? 否

JSX

‎JSX 是 JavaScript 的扩展，允许您在 JavaScript 代码中使用特殊的模板语法。‎

‎通过React推广，这是Vue最具争议的模板选项，因为一些开发人员认为它丑陋，不直观，是对Vue精神的背叛。‎

‎但是，JSX 可用于以更易读、更抽象的方式编写 Vue 渲染功能。不过，它确实需要您转存，因为浏览器无法读取 JSX。‎

Vue.component('my-checkbox', {
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  },
  render() {
    return <div class="checkbox-wrapper" onClick={ this.check }>
            <div class={{ checkbox: true, checked: this.checked }}></div>
            <div class="title">{ this.title }</div>
          </div>
  }
});

 

详情:

• 应用于HTML还是JS? JS
• 是否需要polyfill（补丁）或 transpile（转译器）? 是
• 是否需要运行时模板编译器? 否

‎单文件组件‎

‎Vue.js最受欢迎的功能之一是‎‎单文件组件‎‎（SFC）。这些允许您在将组件定义保留在一个文件中的同时编写标记。它们由 vue 装载机编译为渲染功能，因此您也能获得最佳的运行时间性能。‎

‎要创建 SFC，请首先创建‎‎一个 。vue‎‎文件，例如‎‎"复选框"，‎‎然后在标签中定义模板并定义标签中的组件。然后，此文件导入到您的主 Vue 应用程序。‎templatescript

‎只要您愿意使用 Vue CLI 或在项目中设置自己的构建工具，SFC 就是要走的路。‎

<template>
  <div class="checkbox-wrapper" @click="check">
    <div :class="{ checkbox: true, checked: checked }"></div>
    <div class="title">{{ title }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
};
</script>

详情:

• 应用于HTML还是JS? HTML
• 是否需要polyfill（补丁）或 transpile（转译器）? 是
• 是否需要运行时模板编译器? 否

‎获胜者是...‎

‎我‎‎如果你想要一个 Tldr;本文的版本是：使用单文件组件，因为它们是几乎每个场景中最通用和最强大的选项。‎

‎这就是说，上述每个将有一个优势，在特定的情况下，应该根据你有‎‎的用例‎‎来判断。将每个工具都视为 Vue 中的另一个工具.js工具带，您可能有一天需要这些工具链！‎