Стоит ли проверять содержимое VUE $slots в computed?

Question

[Кирилл]

Computed кэшируется, а проверка наличия каких-то компонентов в определённых $slots на сколько я понимаю ресурсоёмкая.

Сейчас у меня есть computed свойство classList для которое возвращает объект со списком классов, и прям в нём у меня есть проверка на наличие компонентов переданных в слот:

Объект классов

return {
        button: true,
        "button--outline": this.color === "outline",
        "button--primary": this.color === "primary",
        "button--primary-glass": this.color === "primary-glass",
        "button--red": this.color === "red",
        "button--red-glass": this.color === "red-glass",
        "button--yellow": this.color === "yellow",
        "button--yellow-glass": this.color === "yellow-glass",
        "button--green": this.color === "green",
        "button--green-glass": this.color === "green-glass",
        "button--light": this.color === "light",
        "button--disabled": this.disabled,
        "button--full": this.full,
        "button--square": this.square || this.contentOnlyIcon(),
        "button--contains-link": this.link,
        "button--contains-icon": this.contentContainsIcon()
      };

Функции

contentContainsIcon() {
      let status = false;
      this.$slots.default.forEach(VNode => {
        if (
          typeof VNode.componentOptions !== "undefined" &&
          VNode.componentOptions.tag === "AppIcon"
        )
          status = true;
      });
      return status;
    },
    contentOnlyIcon() {
      const content = this.$slots.default;
      if (
        content.length === 1 &&
        typeof content[0].componentOptions !== "undefined" &&
        content[0].componentOptions.tag === "AppIcon"
      )
        return true;
      return false;
    }

Проблема:
Как видно по коду если кнопка содержит только иконку -- то к ней применяется класс который делает её квадратной, но если перезагружать страницу, то класс то применяется то нет, при том что никакие данные нигде не меняются.
Я предполагаю что это связано с кэшированием computed метода?

Comments

[Антон Антон]

Слоты созданы для инверсии зависимостей, и поведение компонента не должно зависеть от содержимого слота. Никогда не надо так делать. Если сильно надо - то намного лучше разрулить через свойства или через разные слоты.
А так да, $refs, $slots и прочее - не реактивное, по этому их изменение не вызывает пересчет computed (и отображения на экране).

[Кирилл]

Антон Антон, тогда можно вопрос?
Как тогда в моём случае сделать? Мне нужно чтобы я не заботился о дополнительных пропсах для того чтобы указать что будет где-то использоваться иконка, и компонент сам определял это?
И в моём случае я так полагаю нужно сделать wathc за слотами и если они проходят по моим условиям менять какую-то переменную в data(), и уже её дёргать в computed() ?

p.s сори за тупые вопросы - vue только начал изучать.

[Антон Антон]

нужно понять, зачем делать квадратным компонент, если в нем только иконка.

[Кирилл]

Антон Антон, это кнопка, у неё по стандарту padding не равномерный, через модификатор можно сделать их одинаковыми и кнопка будет квадратно, т.к только с одной иконкой она должна выглядеть квадратной.

[Антон Антон]

Кирилл, сделай два свойства, icon и label и слот с дефолтным содержимым типа

<slot>
<div :class="paddingClass">
<app-icon v-if="!!icon" .../>
<div v-if="!!label">{{label}}</div>
</div>
</slot>

тогда для простых случаев - иконка и текст - можно разрулить пропсами вычисляемым классом (добавляющего нужные паддинги к дефольтным квадратным, например), а для сложного - пусть тот, кто компонент использует, сам все отступы и добавляет.

[Кирилл]

Антон Антон, в принципе то что я показал можно было и не писать, потому что те кто использует компоненты могли это и так разрулить передав пропс square, но делать они так не хотят )

[Антон Антон]

Кирилл, не, я про то, чтобы в простых случаях вообще не использовать слоты, а использовать пропсы с именем иконки и с текстом

[Кирилл]

Антон Антон, кстати на счёт слотов... стоит ли их использовать или лучше как-то отказаться от них?
Например если компонент карточки, и у неё есть 3 части, шапка, подвал, и контентная часть, у меня к примеру 2 именованных слота и один дефолтный для контентной части.
Сделал так потому что в подвал и в шапку может понадобится прокинуть ещё несколько компонентов. Но собственно эти слоты обёрнуты в div с определённым классом, и если в них не прокинуто ничего, то мне приходится через v-if проверять есть ли в них что-то и тогда только эти div рендерить. На сколько это нормальный подход?

[Антон Антон]

Кирилл, обычно делают один слот и подкомпоненты-обертки, типа card-header, card-section/card-body, card-footer

[Кирилл]

Антон Антон, я тоже об этом задумываюсь, но я пишу пока что всё в однофайловых компонентах, и создавать CardTitle компонент только ради того чтобы он содержал в себе дефолтный слот обёрнутый в div.card__title мне кажется не очень удобным, смотрю на vuetify, там для таких вещей есть хелпер функция которая программно создаёт простой компонент обёртки. Но как к примеру у себя это использовать я пока не понимаю.

Может я в чём-то ошибаюсь?