將大頁面分解成小部分

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。