computed

computed это реактивные вычисляемые свойства, которые автоматически обновляются при изменении зависимых реактивных данных.

Основные принципы:

• Кэширование — результат вычисляется только при изменении зависимостей
• Реактивность — автоматически отслеживает зависимости
• Оптимизация — предотвращает лишние перерасчеты

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script setup>import { ref, computed } from 'vue'  const msg = ref(1)const num = ref(1)  const value = computed(() => {  return msg.value + 1})  function fn() {  msg.value = msg.value - num.value  num.value += 1}// первый клик value = 1// второй клик value = -1</script>  <template>  <p>{{value}}</p>  <button @click="fn">Кнопка</button></template>