(为什么)我应该始终在任何vue.js应用程序中使用组件,无论多么简单?

亨宁

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

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

因此,在寻找文档时,我基本上发现,关于vue测试的几乎所有文档/方法都与测试组件有关。我真的什么也没找到。

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

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

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

根据我在评论中看到的问题,似乎有必要解释为什么我甚至问这样一个问题:

  • 我一般不会批评组件,也不会说它们是个坏主意-我看到基本上抽象和分离关注点通常很有帮助,甚至在许多情况下也很重要。
  • 同时,对于任何种类的抽象,分层和分离,下面一行内容进行介绍,这会带来更多的开销,包括其他文件,将内容放在一起的粘合代码以及使用它所需的工具(在这种情况下vue组件的特殊编辑器能够胜于显示,并且能够正确显示和突出显示.vue文件的语法。
  • Vue文档本身开始时没有组件,据我了解,这表明并非所有用户在任何情况下都应使用组件。
  • 在我看来,我已经很接近这条线了,我是否在寻找建议和理由,如果我认为我的应用程序位于该线之上,那么我应该介绍组件,或者我可以假设我位于该线以下。我想到的答案将是“即使您可能无法从组件中受益匪浅,并且必须将3个文件添加到3个文件的应用程序中,使数量增加一倍,强烈建议使用它们,因为几乎所有文档和大多数用于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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

是否有任何原因为什么我应该/不应该在我的RESTful网址中使用ObjectId

来自分类Dev

为什么我应该使用Django表格

来自分类Dev

为什么在Android应用程序中使用jdbc是错误的?

来自分类Dev

为什么我应该在ASP .Net MVC应用程序中使用HTTPContext会话状态移走表单?

来自分类Dev

为什么在MVC应用程序中使用JSON?

来自分类Dev

为什么我的JQuery褪色滑块不能在任何IE类型上使用?

来自分类Dev

我应该在任何地方使用PIMPL吗?

来自分类Dev

为什么在PHP应用程序中使用IOC容器?

来自分类Dev

如何在任何应用程序中使用jQuery注入HTML标记?

来自分类Dev

为什么我应该使用JPanel?

来自分类Dev

WCM使用类可以在任何可以使用吊索模型的地方使用,哪个应该是首选,为什么?

来自分类Dev

为什么我的Ionic2应用程序始终作为Android应用程序使用?

来自分类Dev

为什么必须在Angular 2应用程序中使用所有带有Component选择器的组件?

来自分类Dev

我不能在任何应用程序中使用非字母键(捷克语版式)

来自分类Dev

在Vue应用程序中使用cheerio

来自分类Dev

为什么我的Vue.js Nuxt应用程序中的图像请求未定义

来自分类Dev

我不能在任何应用程序中使用非字母键(捷克语版式)

来自分类Dev

为什么在Android应用程序中使用jdbc是错误的?

来自分类Dev

简单的android应用程序,我应该使用什么结构?

来自分类Dev

为什么我应该在ASP .Net MVC应用程序中使用HTTPContext会话状态来移走表格?

来自分类Dev

在ServiceStack API应用程序中使用的正确的“按请求”简单注入器生活方式是什么?

来自分类Dev

我的简单iOS应用程序的“前端”应该提到什么?

来自分类Dev

在任何GTK应用程序中使用sudo时出现“无法打开显示:: 0”错误

来自分类Dev

在我的应用程序中使用$ timeout

来自分类Dev

为什么我的Ionic2应用程序始终作为Android应用程序使用?

来自分类Dev

为什么我必须在任何地方使用静态?以及如何避免?

来自分类Dev

使用 TypeScript 对简单的 Vue.js 应用程序进行类型检查

来自分类Dev

为什么我不能在我的基本 React 应用程序中使用 promise?

来自分类Dev

为什么我不能在 Angular 应用程序中使用 JS 文件?

Related 相关文章

  1. 1

    是否有任何原因为什么我应该/不应该在我的RESTful网址中使用ObjectId

  2. 2

    为什么我应该使用Django表格

  3. 3

    为什么在Android应用程序中使用jdbc是错误的?

  4. 4

    为什么我应该在ASP .Net MVC应用程序中使用HTTPContext会话状态移走表单?

  5. 5

    为什么在MVC应用程序中使用JSON?

  6. 6

    为什么我的JQuery褪色滑块不能在任何IE类型上使用?

  7. 7

    我应该在任何地方使用PIMPL吗?

  8. 8

    为什么在PHP应用程序中使用IOC容器?

  9. 9

    如何在任何应用程序中使用jQuery注入HTML标记?

  10. 10

    为什么我应该使用JPanel?

  11. 11

    WCM使用类可以在任何可以使用吊索模型的地方使用,哪个应该是首选,为什么?

  12. 12

    为什么我的Ionic2应用程序始终作为Android应用程序使用?

  13. 13

    为什么必须在Angular 2应用程序中使用所有带有Component选择器的组件?

  14. 14

    我不能在任何应用程序中使用非字母键(捷克语版式)

  15. 15

    在Vue应用程序中使用cheerio

  16. 16

    为什么我的Vue.js Nuxt应用程序中的图像请求未定义

  17. 17

    我不能在任何应用程序中使用非字母键(捷克语版式)

  18. 18

    为什么在Android应用程序中使用jdbc是错误的?

  19. 19

    简单的android应用程序,我应该使用什么结构?

  20. 20

    为什么我应该在ASP .Net MVC应用程序中使用HTTPContext会话状态来移走表格?

  21. 21

    在ServiceStack API应用程序中使用的正确的“按请求”简单注入器生活方式是什么?

  22. 22

    我的简单iOS应用程序的“前端”应该提到什么?

  23. 23

    在任何GTK应用程序中使用sudo时出现“无法打开显示:: 0”错误

  24. 24

    在我的应用程序中使用$ timeout

  25. 25

    为什么我的Ionic2应用程序始终作为Android应用程序使用?

  26. 26

    为什么我必须在任何地方使用静态?以及如何避免?

  27. 27

    使用 TypeScript 对简单的 Vue.js 应用程序进行类型检查

  28. 28

    为什么我不能在我的基本 React 应用程序中使用 promise?

  29. 29

    为什么我不能在 Angular 应用程序中使用 JS 文件?

热门标签

归档