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

2023-12-22

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

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

所以在寻找文档时我基本上看到了everyvue 测试的文档/howto 是关于测试组件的。我真的没有找到其他的。

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

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

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

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

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

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">

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • 如何序列化/反序列化哈希图?

    我有一个包含数百万个条目的大型哈希图 我想将其持久化到磁盘 这样当再次从磁盘读取它时 我就没有将键值对再次插入到映射中的开销 我正在尝试使用谷物图书馆来做到这一点 但似乎HashMap http hackage haskell org pa
  • Javafx 2 树视图过滤

    如何在 JavaFX 2 中过滤节点TreeView 我有一个TextField我想根据内容过滤所有节点 例如节点标签 TextField Thanks 这是我编写的可重复使用的可过滤树项目类 过滤器应该绑定在谓词属性 你呢must use
  • 根据Text动态获取UILabel的高度对于iOS 7.0和iOS 6.1返回不同的值

    我正在使用此方法动态获取 UILabel 的高度 CGSize GetSizeOfLabelForGivenText UILabel label Font UIFont fontForLabel Size CGSize LabelSize
  • 将文本读取为 UTF-8 编码

    假设我编写一个函数来解析包含德语的输入流 下面是一个玩具示例 以下内容在我的机器上有效 因为 UTF8 是标准 readLines textConnection Z rich readLines textConnection Z u00FC
  • drawRect 和 CGGraphicsContext 如何工作?

    我正在处理 Core Graphic 中的一些内容 并且正在寻找有关几个主题的一些额外说明 绘制矩形 我对此有所了解 并且知道这是 UIView 的所有绘图方面的所在 但我只是不清楚幕后发生的事情 当我创建一个 UIView 并填写 dra
  • 现在有什么好的 Eclipse 持续测试插件吗?

    我用过麻省理工学院持续测试 http groups csail mit edu pag continuoustesting 插件在过去 但它早已过时 并且不再与任何接近现代版本的 Eclipse 兼容 有人有好的替代品吗 免费自然是首选 我
  • 通过 gradle FileTree.include 删除目录

    我想说 clean delete fileTree a include subdir include aFile 删除目录 subdir 和文件 aFile 但 subdir 并没有被删除 我可以明确地列出它 clean delete a
  • ASP.NET Web Api 依赖注入 - 单例与否

    我正在使用 asp net 构建一个 Web api 并使用 UnityContainer 来处理依赖项 例如 我的身份验证控制器可以依赖于身份验证服务 class AuthController ApiController private
  • MVCDonutCaching - 当父项未缓存甜甜圈时,子项操作出现问题

    我正在使用很棒的MVCDonut缓存 http mvcdonutcaching codeplex com 从 Nuget 打包 以便缓存整个页面 同时保留某些部分不缓存 该过程很简单 一切都按预期进行 我缓存如下 DonutOutputCa
  • JDK8 与 -source 1.7 [默认方法]

    我有以下课程 public class ZonedDateTimeToInstant public static void main final String args throws NoSuchMethodException assert
  • 不使用分号的计算表达式

    给定像 68 32 这样的输入表达式 我们必须在程序中不使用分号进行计算 如果它是 if 或 for 循环内的东西 参考 https www spoj pl problems EXPR2 https www spoj pl problems
  • 如何在postgresql的pg_hba.conf文件中指定主机名?

    我们想要创建一条像这样的线 托管所有所有 vs1 nsdp ir md5 在 pg hba conf 文件中 但它不理解这个主机名 它的IP是192 168 1 60 当我们使用IP地址时就可以了 但它不适用于主机名 我们在我们的 dns
  • Django-rest-auth (dj-rest-auth) 自定义用户注册

    我正在使用 dj rest auth https dj rest auth readthedocs io en latest https dj rest auth readthedocs io en latest 并尝试实现自定义注册表单
  • docker反向代理DNS/网络问题

    我会尝试解释并把它画出来 我想要实现的目标 对不起 糟糕的油漆图 现在 如果我从 10 10 10 0 网络访问它 它就可以完美运行 问题是 DNS 将 jenkins network com 解析为 10 10 10 0 网络 我想通过代
  • 为什么我在没有释放按键的情况下收到 Pygame KEYUP 事件?

    首先 我是一个完全的初学者 所以我没有任何经验 但是我在过去两天搜索了所有可能的地方来解决问题 但找不到它 我在带有 Raspbian 的 Raspberry PI 3 上使用它 我正在尝试在 Python 3 6 中构建一个简单的代码 它
  • Firebase 消息,onMessage 未被调用

    这就是我调用发送消息的方式 sendMessage var key VERY LONG KEY dffdADFDFD vdfDafd var to VERY LONG KEY ADEWerew vdfDafd var notificatio
  • axios - 如何不在多个参数中添加[]?

    Axios 添加方括号如果有多个具有相同名称的参数 则传递给该参数 问题是我不需要包含那些括号 因为我使用Django Rest Framework and Django Filters 如果我使用这个符号 我该如何做到这一点 axios
  • java中如何捕获嵌套异常

    我正在使用 Apache Xalan v 2 7 1 在 Apache Tomcat v6 0 32 中将 XML 转换为 XHTML 有时加载会被客户端取消并引发以下异常 javax xml transform TransformerEx
  • WPF 中的高效实时日志查看器

    我希望 WPF 中有一个高效的日志查看器控件 它可以在添加消息时简单地显示实时日志 连接来自日志系统的通知是没有问题的 但我担心一旦日志行数量变大 日志窗口将随着每个附加日志行而变得缓慢 日志通知事件将仅提供一个日志字符串 以及一些元数据
  • (为什么)我应该“始终”在任何 vue.js 应用程序中使用组件,无论多么简单?

    我刚刚开始使用 vue js 并且已经从文档的第一个入门章节创建了我需要的大部分非常小的功能 现在我想添加一些测试 以确保我的功能在更改后始终有效 通常我会进行 TDD 但这次我必须先学习 vue 然后决定是否继续使用它 所以在寻找文档时我