将大页面分解成小部分

Question

这实际上是一种代码风格的问题，尽管由于我使用Vue.js来开发我的前端，我正在用Vue术语进行说明。

我正在用Vue.js处理一个相当复杂的Web应用程序。即使使用单个文件组件，我也发现我的一些组件（例如CustomerEditor）变得庞大而笨拙，并且越来越难以编辑。现在，我来自Java背景（实际上是近年来的Grails/Groovy），而我的直觉总是将任何可能在不止一个地方使用的任何东西隔离到它自己的类中，以便尽可能保持DRY原则。

我一直在用Vue.js做这件事，把事情分解成更小的组件，我发现重用的可能性。即使如此，一些文件仍然很大。所以现在我正考虑一些以前从未真正做过的事情，即使这些较小的组件只在一个地方使用一次，也可以将一些组件拆分成更小的组件，仅仅为了这个目的使代码更易读/可编辑。我不得不说这是一条相当陌生的道路，我只是想知道这是否是其他人的惯常做法？

Answer 1

在Vue.js中很常见将大型组件分解为更易于维护的较小组件，即使这些组件不会被重用。以下是来自官方的documentation报价：

组件意味着一起使用，最常见的父子关系：A组份可以在自己的模板中使用B组分。他们不可避免地需要彼此沟通：父母可能需要将数据传递给孩子，孩子可能需要通知父母发生在孩子身上的事情。然而，通过明确定义的界面尽可能使父母和孩子尽可能地分离也是非常重要的。这可以确保每个组件的代码可以相对独立地进行编写和推理，从而使它们更易于维护并可能更易于重用。

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

要注意的另一个重要的事情是让父母和孩子尽可能分离。这也将有助于使代码更易于理解/维护。另一件有助于让你的数据流更容易理解的事情是有一个one-way data flow。