Question

这个问题主要问有关Vue的问题，但也适用于其他各种框架，例如React。

在编程中，函数的布尔参数通常被视为代码异味，并且由于它们会产生不必要的分支，因此是错误的设计选择。反过来，维护成本增加并且代码的清洁度显着下降。

在VueJS中，组件的布尔属性是否类似于对函数使用布尔参数？使用布尔属性是否还会在组件结构中创建不必要的分支并使其难以维护？

我想不出一个很好的例子，所以这似乎足够好。

例如，如果我有一个名为userNeedsToSignUp的道具，然后设计一个假设的身份验证页面，如下所示：

<template>
    <user-greeting-sign-up v-if="userNeedsToSignUp"/>
    <user-greeting-login v-else/>

    <form :action="userNeedsToSignUp ? '/sign-up' : '/login'" :method="userNeedsToSignUp ? 'post' : 'patch'">
        <template v-if="userNeedsToSignUp">
          <new-username-input-box/>
          <new-email-input-box/>
          <new-password-input-box/>
        </template>

        <template v-else>
          <existing-username-input-box/>
          <existing-email-input-box/>
          <existing-password-input-box/>
        </template>
    </form>

    <p v-if="userNeedsToSignUp">
        Have an account? <a>Sign in</a>
    </p>
    <p v-else>
        Need an account? <a>Create</a>
    </p>
</template>

如您所见，这会在组件结构内创建大量分支。因此，这可能是代码异味，需要消除。对于这种特殊情况，哪种设计是更好的选择？或者，我是否考虑得太久了，布尔型的道具就好了吗？

Answer 1

要减少分支和v-if的使用，可以使用dynamic components。

例如，您的表单可以是动态组件。就是说，我认为在很多情况下，根据v-if中的布尔值显示不同的内容就可以了。

您可能还想研究Vue-Router及其nested routes功能。

VueJS布尔属性是否类似于布尔参数？如果是，则如何消除它们？

1 个答案: