vue.js - 将大页面分解成小组件

标签 vue.js

这确实是一个代码风格的问题,虽然我使用 Vue.js 开发我的前端,但我用 Vue 术语来表达它。

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

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

最佳答案

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

Components are meant to be used together, most commonly in parent-child relationships: component A may use component B in its own template. They inevitably need to communicate to one another: the parent may need to pass data down to the child, and the child may need to inform the parent of something that happened in the child. However, it is also very important to keep the parent and the child as decoupled as possible via a clearly-defined interface. This ensures each component’s code can be written and reasoned about in relative isolation, thus making them more maintainable and potentially easier to reuse.

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

另一个需要注意的重要事项是尽可能保持父子关系分离。这也将有助于使代码更易于理解/维护。另一件有助于使您的数据流更容易理解的事情是拥有一个 one-way data flow。 .

关于vue.js - 将大页面分解成小组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47485193/

相关文章:

vue.js - 组件已注册但未使用 vue/no-unused-components

laravel - Axios 响应拦截器 : unable to handle an expired refresh_token (401)

vue.js - VUE/VUEX : How To Pass Data From Parent Template To Child Template

javascript - 如何在 Vuejs 中使用 vue-virtual-scroll-list?

java - Vue SPA 与 Spring Boot,分离与否

javascript - Vue.js:在 jasmine 测试中使用 propsData

javascript - 甚至在 package.json 和 node_modules 中都找不到依赖项

webpack - Vue CLI - 在静态文件中包含 Assets 文件夹中的图像

vue.js - vue组件和点击按钮警报

javascript - Vue Chart.js——我可以为折线图指定缺失数据的默认值吗?