我刚刚开始使用vue.js,并且已经从文档的第一个入门章节创建了我需要的大多数非常小的功能。
现在,我想添加一些测试以确保更改后功能始终可以正常工作(通常我会进行TDD操作,但这一次我必须先学习vue并决定是否继续使用它)。
因此,在寻找文档时,我基本上发现,关于vue测试的几乎所有文档/方法都与测试组件有关。我真的什么也没找到。
这使我想到了该主题中所述的问题:
当我绝对没有要重用的组件时,即使对于最简单的应用程序,使用vue组件也是必要的做法吗?除了目前仅找到有关如何测试组件化vue应用程序的文档的情况外,我还会遇到其他问题吗?
我在网上和Vue文档中进行了搜索(至少希望在此解释一句话,是否以及为什么我应该始终在“基本/组件基础”一章中使用组件,但找不到它...),在这里,但我找不到线索,以及为什么不使用组件通常是个坏主意。
根据我在评论中看到的问题,似乎有必要解释为什么我甚至问这样一个问题:
首先,我认为在考虑是否需要使用组件之前,我需要详细介绍一下组件是什么。
文档的早期页面使用术语“组件”来描述用于创建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">
...然后组件可以使用计算属性代替。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句