首先,我认为在考虑是否需要使用组件之前,我需要先详细了解一下组件是什么。
文档的前几页使用术语“组件”来描述用于创建 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')
Or does App
需要移动到单独的文件才能算作“预定义”吗?
继续...
组件是将模板分成多个部分的唯一方法。它们也是拆分 JavaScript 的主要方式。问题“我必须使用组件吗?”是含蓄地询问“将我的所有代码放在一个文件中可以接受吗?”。这个问题适用于所有编程,它并不是一个真正的 Vue 问题。
如果您很高兴您的应用程序如此小且如此简单,以至于不需要将其分割成更小的部分,那么很好,不要引入任何更多的组件。
然而,问题提到了“变化”。这意味着该应用程序并不完整,表明现在就断定它小而简单还为时过早。如果有足够的正在进行的工作来证明编写测试的开销是合理的,那么它似乎不太可能真的像您建议的那么简单。
重用绝对不是将应用程序拆分为多个组件的唯一原因,但值得进一步考虑您不想重用任何内容的信念。编写单元测试is重复使用。对单体进行单元测试的问题不是 Vue 特有的问题,通常的解决方案是将代码分割成小的、可测试的部分。如果不引入合适的单元,就无法编写单元测试。当然,还可以进行其他形式的测试。
通过组件重用只是重复的另一面。即使在简单的应用程序中,很少有不重复的情况。即使像两个带有匹配类的按钮这样简单的东西也可以被认为是足够的重复来证明引入组件是合理的。您可能更愿意避免额外抽象带来的精神负担。
组件还有其他好处,但对于真正微不足道的应用程序来说,它们不太重要。
例如,当 UI 更新时,它只会重新渲染需要它的 Vue 实例。如果所有内容都在一个实例中,那么它将必须重新渲染所有内容。
作为另一个例子,很难将计算属性与v-for
因为您无法将参数传递给计算属性。相反,你最终不得不使用一种方法:
<div v-for="item in items" :class="someMethod(item)">
如果你引入一个组件...
<some-component v-for="item in items" :item="item">
...那么组件可以使用计算属性来代替。