在编程中,有两个极具挑战性的任务:缓存失效和命名事物。今天,我们将深入探讨后者,探索为Vue组件命名props的艺术。

在给 props 命名时,遵循已有的变量命名惯例是非常重要的。例如,使用小驼峰命名法(isEnabled)并保持名称简短(不超过30个字符)。

然而,Vue有自己的一套最佳实践,我们应该遵循。让我们根据我在使用Vue的经验谈谈一些技巧。

1.内容感知命名

重要的是最大限度地利用变量名传达信息,以减少混淆并使组件的浏览更加容易。

对于数组,选择使用复数名词作为变量名,例如 items 。这个选择立即表明该变量代表一组相关元素的集合。

处理数字时,可以使用前缀如 num 或后缀如 countindex 来表示数值。例如, numItemsitemCountitemIndex 可以清楚地表明变量的数值属性。

在处理对象时,请使用适当的单数名词,例如 item

对于布尔值,请使用描述性前缀如 iscanhas 来传达视觉或行为上的变化:

is 适用于表示视觉或行为状态,例如 isVisibleisEnabledisActive

can 表示行为变化或条件性的视觉变化。考虑使用 canTogglecanExpand 这样的属性名称来清晰地表达组件的能力。

has 表示UI元素的存在。使用前缀如 hasCancelButtonhasHeader 来表示特定的UI元素是否存在或可见。

2. 描述性命名

Props 应该描述组件本身,侧重于它的功能而不是为什么要这样做。避免以当前用户或环境命名 props

例如:

考虑使用 hasSubmitButton ,而不是 hasSubmitPermission

<MyForm hasSubmitButton="user.canSubmit" />

不要选择 isMobileScreen ,而是选择 isCompactLayout

<MyForm isCompactLayout="browser.isMobileScreen" />

避免将 props 命名为子组件。如果这些 props 是用来传递给子组件的,请使用描述组件本身的名称。

  • 使用 <MyList @onItemClick="…" /> 代替 <MyList @onClick="…" />
  • 选择 isLoadingComments 而不是 areCommentsLoading

描述子组件的存在可能会引起误解。如果目标是为了为图标创建更多的空间而不是切换其存在,考虑使用 isSpacious 而不是 hasIcon 。记住, hasIcon 回答的是为什么,而不是什么。

3. 事件处理程序属性

在表示事件处理程序的属性名称之前添加 on (例如,onSelectonClick

使用 handle 前缀来定义处理函数。

<MyComp @onClick="handleClick" />

避免在自定义事件中使用内置的事件处理程序属性名称。如果原生的焦点/点击事件不相关,请使用自定义名称,例如 onSelect ,而不是 onFocusonClick

按照这些准则,我们可以为Vue应用程序建立一致且有意义的 prop 命名约定。周到的 prop 名称有助于提高代码的可读性和可维护性,使你和团队更容易有效地合作。