(为什么*总是*在任何vues.js应用程序中都使用组件,无论多么简单?

问题描述 投票:2回答:1

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

现在,我想添加一些测试以确保更改后我的功能始终可以正常运行(通常我会执行TDD,但这次我必须先学习vue并决定是否继续使用它)。

因此,在寻找文档时,我基本上发现,关于[vue测试]的every文档/方法是关于测试组件的。我真的什么也没找到。

这使我想到了该主题中所述的问题:

即使对于最简单的应用程序,当我绝对没有要重用的组件时,使用vue组件是否也是必要的做法?除了当前仅找到有关如何测试组件化vue应用程序的文档的案例之外,我还会遇到其他问题吗?

我在网上和Vue文档中进行了搜索(至少我希望能在其中解释为什么是否以及为什么应该在“基本/组件基础”一章中始终使用组件,但找不到它的原因。),在这里,但是我找不到线索,并且为什么不使用组件通常是个坏主意。

javascript vue.js vuejs2 vue-component
1个回答
0
投票

首先,我认为在考虑是否需要使用它们之前,我需要对组件的含义进行一些说明。

文档的早期页面使用术语“组件”来描述用于创建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问题。

如果您对您的应用程序如此小巧而又简单,无需将其拆分成小块感到满意,那么就不要引入任何其他组件。

但是,问题提到“变化”。这意味着应用程序不完整,这表明确定它的小巧为时尚早。如果有足够的正在进行的工作来证明编写测试的开销是合理的,那么它似乎真的不可能像您建议的那样简单。

绝对不是将应用程序拆分为多个组件的唯一原因,但值得进一步考虑的是,您认为自己不想重用任何东西。编写单元测试

is重用。单元测试整体的问题不是特定于Vue的问题,通常的解决方案是将代码分成可测试的小片段。不引入合适的单元就不能编写单元测试。当然可以使用其他形式的测试。

通过组件重用只是复制的反面。即使在简单的应用程序中,也很少有任何重复。甚至只有两个具有匹配类的按钮这样简单的事情也可以被认为足以重复以证明引入一个组件。您可能希望避免多余抽象的精神开销。

组件还有其他好处,但是对于真正琐碎的应用程序,它们无关紧要。

例如,当用户界面更新时,它只会重新渲染需要它的Vue实例。如果一切都在一个实例中,那么它将不得不重新渲染一切。

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

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

如果引入组件...

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

...然后组件可以改用计算属性。
© www.soinside.com 2019 - 2024. All rights reserved.