Vueist

Главные слабости шаблонов Vue: Переиспользование одного блока кода в 2+ местах

Как и ожидал, прошлые проблемы не воспринимаются многими как проблемы, особенно если они пишут только на Vue. У вьюшников уже выработанная ментальная модель обхода таких ситуаций. Однако рассмотрим как решить эту проблему для тех, кто еще не сильно знаком со Vue:

issue

<a v-if="condition">
  <!-- Part A -->
</a>
<template v-else>
  <!-- Part A -->
</template>

Мы видим, что какой-то блок кода может повторяться в коде компонента 2+ раза и что же мы можем с этим сделать?

1. Очевидный copy-paste

<a v-if="condition">
  <div class="card"> {{ text }} </div>
</a>
<template v-else>
  <div class="card"> {{ text }} </div>
</template>

Когда информации не так много, то мудрить и не надо, просто копируем и вставляем
+ моментальная реализация
+ легко понять
- нужно следить, чтобы значения всегда были одинаковыми (а быстрый хот-фикс легко такое ломает)
- это некрасиво, чем больше кода тем больше это попахивает
- это усложняет чтение с размером такого блока

Поэтому данное решение оптимально для случаев когда информации имеет смысл продублировать совсем немного

2. Вынос в компонент
Ощущается как самый лучший вариант. Мы же делаем декомпозицию! Разбиваем блоки!

<a v-if="condition">
  <MyScopeCard :text />
</a>
<template v-else>
  <MyScopeCard :text />
</template>

И вроде действительно решает 80% потенциальных проблем. Остается лишь вынести все данные в пропсы / слоты, / ивенты / модели

+ очевидное решение
+ не самая сложная реализация
- Такой компонент не всегда имеет целостность, те по факту он сугубо оказывается прибитый гвоздями к конкретному компоненту и без него не имеет смысла
- Если нужно прокидывать много данный то приходим отчасти к варианту 1, нам все также нужно следить за идентичностью передаваемых пропсов и слотов

<a v-if="condition">
  <MyScopeCard :text :user @save="onSave" @load="onLoad" ... />
</a>
<template v-else>
  <MyScopeCard :text :user @save="onSave" @load="onLoad" ... />
</template>

- Это плодит порой излишние сущности, даже там где они особо не нужны (если нам нужно обернуть кусочек в ссылки или не делать его ссылкой по условию, то это не звучит как повод выделять это в отдельный компонент, да-да можно пойти от обратного и вынести в компонент <ConditionalWrapper wrapper="a" :condition >)

Решение может подойти в абсолютном большинстве случаев, но если нужно перекидывать слишком много данных, то теряет смысл

3. использовать createReusableTemplate

<script setup>
import { createReusableTemplate } from '@vueuse/core'

const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
</script>

<template>
  <DefineTemplate>
    <!-- Part A -->
  </DefineTemplate>

  <dialog v-if="condition">
    <ReuseTemplate />
  </dialog>
  <div v-else>
    <ReuseTemplate />
  </div>
</template>

+ все связанные данные остаются в рамках компонента в котором они имеют смысл (однако тщательно обдумайте вариант 2, возможно вам действительно нужен отдельный компонент)
+ мы не плодим лишних сущностей
+ у нас есть лишь 1 копия и нам точно не надо париться об переиспользовании
+ подход крайне гибок, но за счет избыточности его не хочется применять на каждый чих (меня радует в этом плане баланс)
- требует зависимость
- обладает некоторой избыточностью с небольшим "протеканием" шаблонов в script
- осуждение от коллег придерживающихся подхода, что можно применять вариант ответа только 1 или 2

Избыточное решение для большинства случаев, но в сложный момент он может прийти к вам на помощь, поэтому почему бы и нет

Есть конечно и другие варианты
1) Ухитриться использовать <component :is="condition ? 'div' : 'a'">, но он не всегда возможен, особенно если они расположены раздельно или template это псевдо-компонент и указать его там не выйдет
2) Использовать <script setup lang="jsx"> и описать на JSX, стоп, вы действительно хотите смешать 2 стиля шаблонов в 1 файле?
3) Переразбить компоненты так, чтобы внешняя часть стала утилитарным компонентом (пример с <ConditionalWrapper wrapper="a" :condition >)

В коммах оставлю как это решается в других типах шаблонов

👍16🔥4❤1❤‍🔥1🤔1

1.16K viewsedited 07:14