import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count изменился с ${oldValue} на ${newValue}`);
});

count.value = 1; // Вывод: "count изменился с 0 на 1"

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`Count: ${newCount}, Name: ${newName}`);
      console.log(`Было: Count: ${oldCount}, Name: ${oldName}`);
});

import { ref, watchEffect } from 'vue';

const count = ref(0);
const multiplier = ref(2);

watchEffect(() => {
  console.log(`Результат: ${count.value * multiplier.value}`);
});

// Вывод при инициализации: "Результат: 0"
count.value = 1; // Вывод: "Результат: 2"
multiplier.value = 3; // Вывод: "Результат: 3"

<MyButton class="big red" id="super-btn" />

<!-- Внутри MyButton.vue -->
<template>
  <button>Нажми</button>
</template>

<template>
 <div>
   <button>Жмек-с</buitton>
   <button v-bind="$attrs">Жмак</button>
 </div>
</template>

<template>
  <div class="wrapper">
    <button v-bind="$attrs">Кнопка</button>
  </div>
</template>

<script setup>
defineOptions({
  inheritAttrs: false
})
</script>

<KeepAlive>
  <component :is="currentTabComponent" />
</KeepAlive>

<!-- строка, разделённая запятыми -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- регулярное выражение (используйте `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- массив (используйте `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

<KeepAlive :max="2">
  <component :is="currentTabComponent" />
</KeepAlive>

onActivated(() => {
  console.log('Я снова в деле!');
});

onDeactivated(() => {
  console.log('Пошёл отдыхать');
});

<script setup>
import { ref, onRenderTracked, onRenderTriggered } from 'vue';

const count = ref(0);
const name = ref('Vue');

onRenderTracked((e) => {
  console.log('[tracked]', e);
});

onRenderTriggered((e) => {
  console.log('[triggered]', e);
});
</script>

<template>
  <div>
    <p>Счётчик: {{ count }}</p>
    <p>Имя: {{ name }}</p>
    <button @click="count++">+1</button>
  </div>
</template>

[triggered] { target: ..., key: "count", type: "set" }

onRenderTracked((e) => {
  console.table({
    key: e.key,
    type: e.type,
    target: e.target
  });
});