将大页面分解为小组件

Joh*_*ore 5 vue.js

这实际上是一个代码风格的问题,尽管我使用 Vue.js 来开发我的前端,所以我用 Vue 术语来表达它。

我正在使用 Vue.js 开发一个相当复杂的 Web 应用程序。即使使用单个文件组件,我也发现我的一些组件(例如 CustomerEditor)变得庞大且笨重,并且越来越难以编辑。现在,我有 Java 背景(实际上是近年来的 Grails/Groovy),我的本能总是将任何可能在多个地方可用的东西隔离到它自己的类中,以便尽可能地保留干原则。

我一直在使用 Vue.js 来做到这一点,将事物分解成更小的组件,我看到了重用的可能性。即便如此,有些文件仍然很大。所以现在我正在考虑一些我以前从未真正做过的事情,将一些组件分割成更小的组件,即使这些较小的组件只会在这个地方使用一次,只是为了使代码更具可读性/可编辑性。我不得不说,这感觉是一条相当奇怪的道路,我只是想知道这是否是其他人的常见做法?

Wou*_*ter 2

在 Vue.js 中,将大型组件拆分为更易于维护的较小组件是很常见的,即使这些组件不会被重用。以下引用自官方文档的引用:

\n
\n

组件应该一起使用,最常见的是父子关系:组件 A 可以在其自己的模板中使用组件 B。他们不可避免地需要相互通信:父母可能需要将数据传递给孩子,而孩子可能需要将孩子身上发生的事情告知父母。然而,通过明确定义的接口尽可能保持父级和子级的解耦也非常重要。这确保了每个组件\xe2\x80\x99s 代码都可以相对隔离地编写和推理,从而使它们更易于维护并且更容易重用。

\n
\n

请注意“使它们更易于维护并且可能更易于重用”。在最后。

\n

另一件需要注意的重要事情是让父母和孩子尽可能地分离。这也将有助于使代码更易于理解/维护。另一件有助于使数据流更容易理解的事情是拥有单向数据流

\n