面试官：谈一谈如何编写一个易维护的 Vue 单文件组件

当你使用 Vue 编写单文件组件时，是否曾思考过如何使这些组件在代码维护上更加容易，而不会变成“堆屎山”？同时在面试中，面试官也常常会问我们如何保证自己编写的 Vue 组件易于维护。

今天，我来谈谈我认为编写可维护组件的一些方法：

合理使用 UI 组件

提取必要的组件可以很好地将关注点分离。如果所有逻辑都堆在一个大组件中，会使得我们在定位问题时花费很长时间排除干扰项。

我们来看一个示例：

我们可以提取一个 UserInfo 组件，这使得单行代码的作用非常清楚——显示用户的信息：

是的，我们已经把 UserInfo 组件变成了纯 UI 组件，这样这个组件只负责渲染用户信息。这样的分离使得代码更加模块化，也使得我们的代码更具可读性。

当然，这只是一个简单的例子，好处可能有限。对于更长、更复杂的组件，以这种方式提取将带来更多好处。

语义化的变量胜过一切注释

Vue 组件的 props、数据、计算属性、方法和生命周期钩子（以及其他所有内容）应该有清晰且有意义的名称。

例如，这是一个不好的示例：

由于代码很少，所以我们还可以看出这是一个计数器程序，但还是花费了一些时间才看出来。相比之下，下面这种命名方式就非常清晰明了：

在重构的代码中，我们改进了变量和方法的命名，使它们更具描述性。现在我们不需要每次回到这个组件时都浪费时间和精力。

拆分太长的组件

当一个组件做太多事情并且变得太长时，理解和维护就会变得困难。

长组件原则告诉我们，将长组件分解为较小的、集中的组件有助于提高可读性、可重用性和可测试性。

这是一个示例组件，我们可以看出逻辑还是比较长的：

虽然组件比较长，但我们还是可以看出这个组件存在明显的边界性。从这个组件上可以看出，这个组件主要分为 头部、商品列表、卡车列表 这三个比较独立的功能区块。

因此，我们可以提取三个独立的组件：

• StoreHeader

• ItemList

• Cart

将它们合在一起，可以看一下效果：

虽然将一个复杂的组件变成多个简单的组件，可能会稍微增加一些代码量，但这些代码更容易理解、维护和修改。

---

小结

通过使用良好的命名约定、提取组件和方法、组织代码以及遵循最佳实践，您可以使 Vue 组件更易于维护和使用。

如果这篇文章对你有帮助，欢迎点赞、关注、转发！