< template>
  < div>
    < h1 ref="titleElement">Привет, Vue 3!< /h1>
    < p>Текст заголовка: {{ titleText }}< /p>
  < /div>
< /template>

< script setup>
import { ref, onMounted } from 'vue'

// Создаём ref для элемента DOM
const titleElement = ref(null)
const titleText = ref('')

onMounted(() => {
  // Теперь DOM доступен, элемент гарантированно существует
  if (titleElement.value) {
    titleText.value = titleElement.value.textContent
    console.log('DOM элемент заголовка:', titleElement.value)

    // Можем изменять DOM напрямую (хотя лучше использовать реактивность)
    titleElement.value.style.color = 'blue'
  }
})
< /script>

< template>
  < div>
    < h2>Список пользователей< /h2>
    < div v-if="loading">Загрузка...< /div>
    < ul v-else>
      < li v-for="user in users" :key="user.id">{{ user.name }}< /li>
    < /ul>
  < /div>
< /template>

< script setup>
import { ref, onMounted } from 'vue'

const users = ref([])
const loading = ref(true)

onMounted(async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users')
    users.value = await response.json()
  } catch (error) {
    console.error('Ошибка загрузки:', error)
  } finally {
    loading.value = false
  }
})
< /script>

< template>
  < div>
    < div ref="chartContainer" style="width: 600px; height: 400px;">< /div>
  < /div>
< /template>

< script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts' // Пример библиотеки для графиков

const chartContainer = ref(null)
let chartInstance = null

onMounted(() => {
  if (chartContainer.value) {
    // Инициализируем график только после монтирования DOM элемента
    chartInstance = echarts.init(chartContainer.value)
    const option = {
      title: { text: 'Пример графика' },
      xAxis: { data: ['Янв', 'Фев', 'Мар', 'Апр', 'Май'] },
      yAxis: {},
      series: [{ name: 'Продажи', type: 'bar', data: [5, 20, 36, 10, 15] }]
    }

    chartInstance.setOption(option)

    // Обработчик изменения размера окна
    window.addEventListener('resize', handleResize)
  }
})

// Важно очищать ресурсы
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
  window.removeEventListener('resize', handleResize)
})

function handleResize() {
  if (chartInstance) {
    chartInstance.resize()
  }
}
< /script>

< template>
  < div>
    < p>Ширина окна: {{ windowWidth }}px< /p>
  < /div>
< /template>

< script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const windowWidth = ref(window.innerWidth)
const updateWidth = () => {
  windowWidth.value = window.innerWidth
}

onMounted(() => {
  // Подписываемся на событие только после монтирования
  window.addEventListener('resize', updateWidth)
})

// Не забываем отписаться при размонтировании
onUnmounted(() => {
  window.removeEventListener('resize', updateWidth)
})
< /script>

< script setup>
import { watch, ref } from 'vue'

const chartContainer = ref(null)

watch(chartContainer, (newElement) => {
  if (newElement) {
    // Элемент появился в DOM (аналог mounted для этого ref)
    console.log('Элемент готов:', newElement)
  }
}, { flush: 'post' }) // 'post' гарантирует выполнение после обновления DOM
< /script>

< template>
  < div>
    < h2>Счётчик: {{ count }}< /h2>
    < button @click="count++">Увеличить< /button>
    < p>Компонент обновлялся: {{ updateCount }} раз< /p>
  < /div>
< /template>

< script setup>
import { ref, onUpdated } from 'vue'

const count = ref(0)
const updateCount = ref(0)

// БЕЗОПАСНО: просто считаем обновления, не меняя реактивные данные
onUpdated(() => {
  updateCount.value++
  console.log(`DOM обновлён. Счётчик: ${count.value}`)
})
< /script>

< template>
  < div>
    < textarea v-model="text" placeholder="Введите текст...">< /textarea>
    < p>Последнее сохранение: {{ lastSaved || 'ещё не было' }}< /p>
  < /div>
< /template>

< script setup>
import { ref, watch, onUpdated } from 'vue'

const text = ref('')
const lastSaved = ref('')
let previousText = ''

// ЛУЧШАЯ ПРАКТИКА: используйте watch для реактивных изменений
watch(text, (newText, oldText) => {
  // Автосохранение при существенном изменении
  if (newText.length > 10 && newText !== oldText) {
    simulateSave()
  }
})

// onUpdated используем только для логирования
onUpdated(() => {
  console.log('Текущая длина текста:', text.value.length)
})

function simulateSave() {
  lastSaved.value = new Date().toLocaleTimeString()
  console.log('Текст сохранён:', text.value.substring(0, 20) + '...')
}
< /script>

< template>
  < div>
    < input ref="inputElement" v-model="message" />
    < p>Сообщение: {{ message }}< /p>
    < p ref="textElement">Длина сообщения: {{ message.length }}< /p>
  < /div>
< /template>

< script setup>
import { ref, onUpdated, nextTick } from 'vue'

const message = ref('')
const inputElement = ref(null)
const textElement = ref(null)

// ВАЖНО: Изменение DOM только при необходимости
onUpdated(async () => {
  // Используем nextTick для гарантии, что DOM уже обновлён
  await nextTick()

  // Пример: выделение текста в input при определённых условиях
  if (inputElement.value && message.value.length > 15) {
    inputElement.value.select()
    console.log('Текст выделен (длина > 15)')
  }

  // Пример: логирование изменения стилей другого элемента
  if (textElement.value) {
    const color = message.value.length > 10 ? 'darkred' : 'black'
    if (textElement.value.style.color !== color) {
      textElement.value.style.color = color
    }
  }
})
< /script>

< template>
  < div>{{ value }}< /div>
< /template>

< script setup>
import { ref, onUpdated } from 'vue'

const value = ref(0)

// БЕСКОНЕЧНЫЙ ЦИКЛ: изменение реактивных данных в onUpdated
onUpdated(() => {
  value.value++ // КРИТИЧЕСКАЯ ОШИБКА: вызовет повторный onUpdated
  console.log('Обновление...') // Будет выполняться бесконечно
})
< /script>

< script setup>
import { ref, onUpdated, nextTick } from 'vue'

const data = ref(0)
const shouldUpdateDOM = ref(false)

// Основную логику в watch
watch(data, (newVal) => {
  if (newVal > 5) {
    shouldUpdateDOM.value = true
  }
})

// onUpdated - только для DOM операций
onUpdated(async () => {
  if (!shouldUpdateDOM.value) return

  await nextTick()

  // Безопасная работа с DOM
  const element = document.getElementById('target')
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }

  shouldUpdateDOM.value = false // Сбрасываем флаг
})
< /script>

< script setup>
import { watch, ref } from 'vue'

const count = ref(0)

// Выполнится после обновления DOM (как onUpdated,
// но для конкретного reactive-источника)
watch(count, () => {
  console.log('Count изменился, DOM обновлён')
}, { flush: 'post' })
< /script>

< template>
  < div>
    < h2>Таймер: {{ count }} сек< /h2>
    < button @click="stopTimer" v-if="timer">Остановить таймер< /button>
    < button @click="startTimer" v-else>Запустить таймер< /button>
  < /div>
< /template>

< script setup>
import { ref, onUnmounted } from 'vue'

const count = ref(0)
let timer = null

const startTimer = () => {
  timer = setInterval(() => {
    count.value++
    console.log('Таймер тикает:', count.value)
  }, 1000)
}

const stopTimer = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
    console.log('Таймер остановлен вручную')
  }
}

// ВАЖНО: очистка при размонтировании компонента
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    console.log('Таймер очищен в onUnmounted')
  }
})
< /script>

< template>
  < div>
    < p>Ширина окна: {{ windowWidth }}px< /p>
    < p>Сообщения WebSocket: {{ messages.length }}< /p>
  < /div>
< /template>

< script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const windowWidth = ref(window.innerWidth)
const messages = ref([])
let socket = null
let resizeHandler = null

onMounted(() => {
  // 1. Подписка на событие resize
  resizeHandler = () => {
    windowWidth.value = window.innerWidth
  }
  window.addEventListener('resize', resizeHandler)

  // 2. Инициализация WebSocket соединения
  socket = new WebSocket('wss://echo.websocket.org')
  socket.onmessage = (event) => {
    messages.value.push(event.data)
  }
  socket.onopen = () => {
    console.log('WebSocket подключён')
  }
})

// ОЧИСТКА ВСЕХ РЕСУРСОВ
onUnmounted(() => {
  // 1. Удаляем обработчик события
  if (resizeHandler) {
    window.removeEventListener('resize', resizeHandler)
    console.log('Обработчик resize удалён')
  }

  // 2. Закрываем WebSocket соединение
  if (socket && socket.readyState === WebSocket.OPEN) {
    socket.close()
    console.log('WebSocket соединение закрыто')
  }
})
< /script>

< template>
  < div>
    < div ref="mapContainer" style="width: 100%; height: 400px;">< /div>
    < button @click="showMap = !showMap">
      {{ showMap ? 'Удалить карту' : 'Показать карту' }}
    < /button>
  < /div>
< /template>

< script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'

const mapContainer = ref(null)
const showMap = ref(true)
let mapInstance = null
let mapLibrary = null

onMounted(async () => {
  if (!showMap.value) return

  // Динамический импорт библиотеки (если она тяжёлая)
  mapLibrary = await import('leaflet')
  await nextTick() // Ждём рендеринг контейнера

  if (mapContainer.value) {
    mapInstance = mapLibrary.map(mapContainer.value).setView([51.505, -0.09], 13)
    mapLibrary.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mapInstance)
    console.log('Карта инициализирована')
  }
})

onUnmounted(() => {
  // Очищаем ресурсы карты
  if (mapInstance) {
    mapInstance.remove()
    mapInstance = null
    console.log('Карта удалена из памяти')
  }

  // Очищаем ссылки на библиотеку
  mapLibrary = null
})
< /script>

< template>
  < div>
    < h3>Загрузка данных< /h3>
    < button @click="fetchData" :disabled="loading">
      {{ loading ? 'Загрузка...' : 'Загрузить данные' }}
    < /button>
    < div v-if="data">{{ data }}< /div>
  < /div>
< /template>

< script setup>
import { ref, onUnmounted } from 'vue'
import axios from 'axios'

const data = ref(null)
const loading = ref(false)
let abortController = null

const fetchData = async () => {
  // Отменяем предыдущий запрос, если он есть
  if (abortController) {
    abortController.abort()
  }

  // Создаём новый AbortController
  abortController = new AbortController()
  loading.value = true

  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1', {
      signal: abortController.signal
    })
    data.value = response.data
  } catch (error) {
    if (error.name !== 'AbortError') {
      console.error('Ошибка загрузки:', error)
    }
  } finally {
    loading.value = false
  }
}

// Отменяем все pending-запросы при размонтировании
onUnmounted(() => {
  if (abortController) {
    abortController.abort()
    console.log('HTTP-запросы отменены')
  }
})
< /script>

< script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const audioElement = ref(null)
let audioContext = null
let animationFrameId = null
let eventListeners = []

onMounted(() => {
  // 1. Аудио контекст
  audioContext = new (window.AudioContext || window.webkitAudioContext)()

  // 2. Запуск анимации
  const animate = () => {
    // Логика анимации
    animationFrameId = requestAnimationFrame(animate)
  }
  animationFrameId = requestAnimationFrame(animate)

  // 3. Несколько обработчиков событий
  const clickHandler = () => console.log('Click')
  const keyHandler = () => console.log('Key')
  document.addEventListener('click', clickHandler)
  window.addEventListener('keydown', keyHandler)
  eventListeners.push(
    { element: document, type: 'click', handler: clickHandler },
    { element: window, type: 'keydown', handler: keyHandler }
  )
})

// ЦЕНТРАЛИЗОВАННАЯ ОЧИСТКА
onUnmounted(() => {
  console.log('Начало очистки ресурсов...')

  // 1. Останавливаем аудио контекст
  if (audioContext && audioContext.state !== 'closed') {
    audioContext.close().then(() => {
      console.log('AudioContext закрыт')
    })
  }

  // 2. Отменяем анимацию
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId)
    console.log('Анимация остановлена')
  }

  // 3. Удаляем все обработчики событий
  eventListeners.forEach(({ element, type, handler }) => {
    element.removeEventListener(type, handler)
  })
  eventListeners.length = 0  console.log('Обработчики событий удалены')

  // 4. Очищаем DOM ссылки
  audioElement.value = null
  console.log('Все ресурсы очищены')
})
< /script>

< script setup>
import { onUnmounted } from 'vue'

// Паттерн "Коллекционер очистки"
const cleanupCallbacks = []

const registerCleanup = (callback) => {
  cleanupCallbacks.push(callback)
}

// Регистрируем очистки
registerCleanup(() => {
  console.log('Первая задача очистки')
})

registerCleanup(() => {
  console.log('Вторая задача очистки')
})

// Выполняем все очистки
onUnmounted(() => {
  cleanupCallbacks.forEach(callback => callback())
  cleanupCallbacks.length = 0
})
< /script>

< script setup>
// ❌ НЕДОСТАТОЧНАЯ очистка
let timer = setInterval(() => {}, 1000)
onUnmounted(() => {
  clearInterval(timer) // ОК
  // Но timer всё ещё содержит ID, лучше обнулить
})

// ✅ ПРАВИЛЬНАЯ очистка
let timer = setInterval(() => {}, 1000)
onUnmounted(() => {
  clearInterval(timer)  timer = null // Явное обнуление
})

// ❌ ПРОПУЩЕННАЯ очистка динамических ресурсов
onMounted(() => {
  // Ресурс создаётся условно
  if (Math.random() > 0.5) {
    const extraTimer = setInterval(() => {}, 500)
    // Забыли сохранить ссылку для очистки!
  }
})

// ✅ УСЛОВНАЯ очистка
let extraTimer = null
onMounted(() => {
  if (Math.random() > 0.5) {
    extraTimer = setInterval(() => {}, 500)
  }
})
onUnmounted(() => {
  if (extraTimer) {
    clearInterval(extraTimer)
  }
})
< /script>

< script setup>
import { ref, watch } from 'vue'

const userId = ref(1)

watch(userId, () => {
  console.log(userId.value);
});
< /script>

watch(userId, (newValue, oldValue) => {
  console.log('Старое значение: ' + ${oldValue});
  console.log('Новое значение:  ' + ${newValue});
});

watch(  userId, (newValue, oldValue) => {
    console.log('Старое значение: ' + ${oldValue});
    console.log('Новое значение:  ' + ${newValue});
  },
  { immediate: true }
);

watch(  userId, (newValue, oldValue) => {
    console.log('Старое значение: ' + ${oldValue});
    console.log('Новое значение:  ' + ${newValue});
  },
  { once: true }
);

< script setup>
import { ref, watchEffect } from 'vue'

const userId = ref(1)
const userData = ref(null)

watchEffect(() => {
  console.log(userId.value);
  console.log(userData.value);
});
< /script>

< script setup>
import { ref, watch } from 'vue'

const userId = ref(1)
const userData = ref(null)

// watch СФОКУСИРОВАН на изменении конкретного reactive-источника
watch(userId, async (newId) => {
  const response = await fetch(`/api/users/${newId}`)
  userData.value = await response.json()
}, { immediate: true }) // immediate:true выполнит запрос сразу при создании
< /script>

< template>
  < div>
    < div ref="messageList">
      < p v-for="msg in messages" :key="msg.id">{{ msg.text }}< /p>
    < /div>
  < /div>
< /template>

< script setup>
import { ref, onUpdated, nextTick } from 'vue'

const messages = ref([/*...*/])
const messageList = ref(null)

// onUpdated отслеживает ЛЮБОЕ обновление компонента
onUpdated(async () => {
  // Ждём следующего тика, чтобы быть уверенным в обновлении DOM
  await nextTick()

  // Прокручиваем список к низу при добавлении новых сообщений
  if (messageList.value) {
    messageList.value.scrollTop = messageList.value.scrollHeight
  }
})
< /script>

< script setup>
import { ref, onUpdated } from 'vue'

const searchQuery = ref('')
const searchResults = ref([])

// ❌ ПЛОХО: onUpdated сработает при ЛЮБОМ обновлении,
// не только при изменении searchQuery
onUpdated(async () => {
  const response = await fetch(`/api/search?q=${searchQuery.value}`)
  searchResults.value = await response.json()
  // Беда! Запрос будет выполняться при каждом рендере,
  // вызывая бесконечные запросы, если ответ меняет
  // какие-то реактивные данные.
})

// ✅ ХОРОШО: watch сработает ТОЛЬКО при изменении searchQuery
watch(searchQuery, async (newQuery) => {
  const response = await fetch(`/api/search?q=${newQuery}`)
  searchResults.value = await response.json()
})
< /script>

< script setup>
import { ref, watch } from 'vue'

const items = ref([])
const listElement = ref(null)

// watch с flush: 'post' сработает ПОСЛЕ обновления DOM
watch(items, () => {
  // Теперь можно безопасно работать с DOM
  if (listElement.value) {
    console.log('Высота списка после обновления:', listElement.value.clientHeight)
  }
}, { flush: 'post' }) // < -- Ключевая опция
< /script>

< script setup>
import { ref, watch } from 'vue'

const userId = ref(1)
watch(userId, () => {
  console.log(userId.value);
  onWatcherCleanup(() => {
    console.log("Очистка");
  })
});
< /script>

< script setup>
import { ref, watch } from 'vue'

const searchQuery = ref('')
const searchResults = ref([])
const isLoading = ref(false)

watch(searchQuery, (newQuery, oldQuery, onCleanup) => {
  if (!newQuery.trim()) {
    searchResults.value = []
    return
  }

  isLoading.value = true
  const abortController = new AbortController()

  // Регистрируем функцию очистки  onCleanup(() => {
    abortController.abort() // Отменяем предыдущий запрос
    console.log('Запрос отменён:', oldQuery)
  })

  // Выполняем запрос с сигналом отмены
  fetch(`https://api.example.com/search?q=${newQuery}`, {
    signal: abortController.signal
  })
    .then(response => response.json())
    .then(data => {
      searchResults.value = data
    })
    .catch(err => {
      if (err.name !== 'AbortError') {
        console.error('Ошибка запроса:', err)
      }
    })
    .finally(() => {
      isLoading.value = false
    })
}, { debounce: 300 }) // Опционально: добавляем debounce
< /script>

< script setup>
import { ref, watchEffect } from 'vue'

const count = ref(0)
const isActive = ref(true)

// watchEffect автоматически отслеживает все используемые reactive-значения
watchEffect((onCleanup) => {
  if (!isActive.value) return

  const intervalId = setInterval(() => {
    count.value++
    console.log('Счётчик:', count.value)
  }, 1000)

  // Очистка при изменении isActive или остановке эффекта
  onCleanup(() => {
    clearInterval(intervalId)
    console.log('Интервал очищен')
  })
})
< /script>

< script setup>
import { ref, watch } from 'vue'

const chartData = ref({ /* ... */ })
let chartInstance = null

// Отслеживаем изменения данных для обновления графика
watch(chartData, (newData, oldData, onCleanup) => {
  if (!chartInstance) {
    chartInstance = initChartLibrary('#chart-container')
  }

  // Подписываемся на событие клика по графику
  const clickHandler = (event) => {
    console.log('Клик по точке:', event.point)
  }

  chartInstance.on('click', clickHandler)

  // Отписываемся перед следующим обновлением
  onCleanup(() => {
    chartInstance.off('click', clickHandler)
  })
  chartInstance.updateData(newData)
}, { deep: true })
< /script>

< script setup>
import { ref, watch } from 'vue'

const userId = ref(null)
let socket = null

watch(userId, (newId, oldId, onCleanup) => {
  if (!newId) return

  // Создаём новое WebSocket соединение для пользователя
  socket = new WebSocket(`wss://api.example.com/ws?user=${newId}`)

  socket.onmessage = (event) => {
    console.log('Сообщение:', event.data)
  }

  // Закрываем соединение при изменении userId или остановке
  onCleanup(() => {
    if (socket && socket.readyState === WebSocket.OPEN) {
      socket.close(1000, 'UserId changed')
      console.log(`Соединение для пользователя ${oldId} закрыто`)
    }
    socket = null
  })
})
< /script>

< script setup>
import { ref, watchEffect } from 'vue'

const settings = ref({
  pollInterval: 5000,
  autoRefresh: true
})

// Динамически меняем логику в зависимости от настроек
watchEffect((onCleanup) => {
  const cleanupCallbacks = []

  if (settings.value.autoRefresh) {
    // 1. Таймер опроса
    const pollTimer = setInterval(() => {
      fetchData()
    }, settings.value.pollInterval)

    cleanupCallbacks.push(() => {
      clearInterval(pollTimer)
      console.log('Таймер опроса очищен')
    })

    // 2. Подписка на события документа
    const clickHandler = () => console.log('Document clicked')
    document.addEventListener('click', clickHandler)

    cleanupCallbacks.push(() => {
      document.removeEventListener('click', clickHandler)
      console.log('Подписка на события очищена')
    })
  }

  // Общая функция очистки для всех ресурсов
  onCleanup(() => {
    cleanupCallbacks.forEach(cb => cb())
    cleanupCallbacks.length = 0
  })
})

async function fetchData() {
  // Логика загрузки данных
}
< /script>

watchEffect((onCleanup) => {
  // 1. Первый запуск эффекта
  console.log('Эффект выполняется')

  onCleanup(() => {
    // 3. Выполнится ПЕРЕД следующим запуском эффекта
    console.log('Очистка предыдущего эффекта')
  })

  // 2. Основная логика эффекта
})

// При изменении зависимостей:
// 1. Выполняется функция очистки (если была зарегистрирована)
// 2. Выполняется эффект снова

// ✅ ПРАВИЛЬНО: onCleanup регистрируется синхронно
watchEffect((onCleanup) => {
  const timer = setTimeout(() => {}, 1000)
  onCleanup(() => clearTimeout(timer)) // Синхронно!
})

// ❌ ОШИБКА: onCleanup вызывается асинхронно
watchEffect(async (onCleanup) => {
  const data = await fetchData()
  // Уже поздно! Эффект мог перезапуститься до этого момента
  onCleanup(() => { /* ... */ }) // Не сработает как ожидается
})

watchEffect((onCleanup) => {
  // Можно регистрировать несколько функций очистки
  onCleanup(() => console.log('Очистка 1'))
  onCleanup(() => console.log('Очистка 2'))

  // Они выполнятся в порядке, обратном регистрации:
  // 1. "Очистка 2"
  // 2. "Очистка 1"
})

< script setup>
import { watchEffect, onUnmounted } from 'vue'

const stop = watchEffect((onCleanup) => {
  onCleanup(() => {
    console.log('Эффект остановлен')
  })
})

// Остановка вручную вызовет функцию очистки
onUnmounted(() => {
  stop()
})
< /script>