Булевы реквизиты VueJS похожи на булевы параметры и, если да, то как их устранить?

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, вы можете использовать динамические компоненты .

Например, ваши формы могут быть динамическими компонентами. Тем не менее, я думаю, что есть много случаев, когда показывать разные вещи на основе логического значения в v-if просто отлично.

Возможно, вы захотите посмотреть Vue-Router и его вложенные маршруты .