Сайд эффект реактивности и апдейта компонента во Vue 3

[Ksey_N]

Нет тут сайд-эффекта.
Функции во vue не кэшируют своего значения и поэтому, если мы в вёрстке используем фукнции, каждый раз при обновлении состояния они будут отрабатывать заново.

Для того чтобы этого не происходило во vue есть computed свойства.

[Vadiok]

Чтобы понять, почему так происходит, стоит посмотреть, как выглядит скомпилированная из шаблона render функция.

[stvoid]

Ну, полагаю вы можете просто создать некоторый один computed, где составите карту карту по значениями классов для элементов списка (в реальности например по каким нибудь taskId и т.п. что будет в этом списке), и тогда по сути вы избежите таких массовых вызовов.

Но хозяин барин, в именно таком кейсе не вижу подвоха в своем предложении.

[Tyusha]

На мой взгляд использовать функцию для :class это моветон с концептуальной точки зрения, для этого есть computed свойства. Функция — это действие. Значение :class — это свойство.

Создатели Vue обо всëм позаботились. Не надо смешивать тëплое с мягким, и не будет ненужных головоломок с реактивным поведением. Видишь в шаблоне @ — используй функцию, видишь : — приписывай свойство.

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

[danilovmy]

@Tyusha- Вот спасибо, буду цитировать:

Видишь в шаблоне @ — используй функцию, видишь : — приписывай свойство.

@yudeek - а что мешало создать компонент "элемент списка". Хранит свой стейт внутри, при необходимости перерендер только одного компонента, DRY опять же, код проще:

<template>
    <li :class="{'active': clicked}" @click="clicked = !clicked">
        <slot></slot>
    </li>
</template>

<script>
export default {
    data () {
        return { clicked: false }
    }
}
</script>

нотация работает как в Vue.js 2, так и в Vue.js 3.

[AVIL13]

const add = () => arr.value = [];

Каждый раз создаёт новый массив.

Кажется вы запутались в том что делаете