（为什么）我应该“始终”在任何 vue.js 应用程序中使用组件，无论多么简单？

Question

我刚刚开始使用 vue.js，并且已经从文档的第一个入门章节创建了我需要的大部分非常小的功能。

现在我想添加一些测试，以确保我的功能在更改后始终有效（通常我会进行 TDD，但这次我必须先学习 vue，然后决定是否继续使用它）。

因此，在寻找文档时，我基本上看到几乎所有关于vue 测试的文档/指南都是关于测试组件的。我真的没有找到其他的。

这引出了主题中所述的问题：

当我肯定没有任何东西可以重用为组件时，即使对于最简单的应用程序，使用 vue 组件是否是必要的做法？除了当前仅找到有关如何测试组件化 vue 应用程序的文档的情况之外，我还会遇到其他问题吗？

我搜索了网络和 vue 文档（至少我希望有一句解释是否以及为什么我应该始终在“essentials/Components basics”章节中使用组件，但没有找到它......），在这里，但我找不到线索是否以及为什么不使用组件可能是一个普遍的坏主意。

根据我在评论中看到的问题，似乎有必要解释一下为什么我会问这样的问题：

我一般不会批评组件或说它们是一个坏主意 - 我发现基本上抽象和关注点分离通常是有帮助的，甚至在许多情况下很重要。
同时，对于任何类型的抽象、分层和分离，下面都有一行，引入它会在附加文件、将事物组合在一起的粘合代码以及使用它所需的工具方面带来更多开销（在本例中） vue 组件的特殊编辑器能够正确显示和语法突出显示 .vue 文件）比优势。
vue 文档本身在开始时没有组件，据我了解，这表明并非所有用户在任何情况下都应该使用组件。
在我看来，我非常接近这条线，并且我正在寻找建议和原因，如果我应该考虑我的应用程序位于这条线之上，那么我应该引入组件，或者我可以假设我位于这条线之下。我想到的答案是“即使您可能不会从组件中受益匪浅，并且必须向您的 3 文件应用程序中添加 3 个文件，使数量增加一倍，但强烈建议使用它们，因为几乎所有文档，以及大多数 vue 工具都假设正在使用组件。” - 或“继续，在您认为合适的时候引入组件”。同时我得到了一个有用的答案，我将其标记为这样。

Answer 1

首先，我认为在考虑是否需要使用组件之前，我需要先详细了解一下组件是什么。

文档的前几页使用术语“组件”来描述用于创建 Vue 实例的一组预定义选项。从这个意义上说，它们可以被认为是“类”，尽管从技术上讲它们不是 JavaScript 类。

然而，术语“组件”也经常用于描述实例。从这个意义上说，您已经在使用组件，尽管是一个大组件。

显然，该术语可以更广泛地使用，因为它不是 Vue 特定的术语。

值得注意的是，组件不需要使用Vue.component. 对于一个应用程序来说，拥有许多组件而不使用Vue.component. 这些组件可以在本地导入。

根据这个问题，我假设您有一个主 JavaScript 文件，比方说main.js，其中包含所有与 Vue 相关的 JavaScript。关键部分可能如下所示：

new Vue({
  data () {
    return { /* some data */}
  },

  computed: { /* ... */ },
  methods: { /* ... */ }
}).mount('#app')

宽松地说，这里的 Vue 实例可以被描述为一个组件。如果我们更严格一点，那么只有配置才会被视为组件，即使如此，只有它是“预定义的”。目前还不完全清楚这意味着什么。例如，仅将配置移出就足以使其成为“预定义”吗？

const App = {
  data () {
    return { /* some data */ }
  },

  computed: { /* ... */ },
  methods: { /* ... */ }
}

new Vue(App).mount('#app')

或者是否App需要移动到单独的文件才能算作“预定义”？

继续...

组件是将模板分成多个部分的唯一方法。它们也是拆分 JavaScript 的主要方式。问题“我必须使用组件吗？” 隐含地询问“将我的所有代码放在一个文件中是否可以接受？” 。这个问题适用于所有编程，它并不是一个真正的 Vue 问题。

如果您很高兴您的应用程序如此小且如此简单，以至于不需要将其分割成更小的部分，那么很好，不要引入任何更多的组件。

然而，问题提到了“变化”。这意味着该应用程序并不完整，表明现在就断定它小而简单还为时过早。如果有足够的正在进行的工作来证明编写测试的开销是合理的，那么它似乎不太可能真的像您建议的那么简单。

重用绝对不是将应用程序拆分为多个组件的唯一原因，但值得进一步考虑您不想重用任何内容的信念。编写单元测试就是重用。对单体进行单元测试的问题不是 Vue 特有的问题，通常的解决方案是将代码分割成小的、可测试的部分。如果不引入合适的单元，就无法编写单元测试。当然，还可以进行其他形式的测试。

通过组件重用只是重复的另一面。即使在简单的应用程序中，很少有不重复的情况。即使像两个带有匹配类的按钮这样简单的东西也可以被认为是足够的重复来证明引入组件是合理的。您可能更愿意避免额外抽象带来的精神负担。

组件还有其他好处，但对于真正微不足道的应用程序来说，它们不太重要。

例如，当 UI 更新时，它只会重新渲染需要它的 Vue 实例。如果所有内容都在一个实例中，那么它将必须重新渲染所有内容。

作为另一个示例，很难将计算属性与 a 结合使用，v-for因为您无法将参数传递给计算属性。相反，您最终必须使用一种方法：

<div v-for="item in items" :class="someMethod(item)">

如果你引入一个组件...

<some-component v-for="item in items" :item="item">

...那么组件可以使用计算属性来代替。