Какие есть особенности и основные концепции Vue.js?

Vue.js — это прогрессивный фреймворк для построения пользовательских интерфейсов. Его главные фичи — реактивная система данных и компонентный подход. В отличие от React, Vue использует шаблоны (template) вместо JSX, и реактивность реализована через Proxy (в Vue 3) или defineProperty (в Vue 2).

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

• Реактивность: при изменении данных Vue автоматически обновляет DOM. Например, если у нас есть data() { return { count: 0 } }, то при вызове this.count++ в шаблоне перерендерится только то, что зависит от count.
• Однофайловые компоненты (SFC): каждый компонент — это файл .vue, содержащий template, script и style. Это упрощает организацию кода.
• Директивы: v-bind для привязки атрибутов, v-if/v-show для условного рендеринга, v-for для списков, v-model для двусторонней привязки в формах.
• Computed и watchers: computed — это вычисляемые свойства, которые кэшируются и обновляются только при изменении зависимостей. watch — следит за изменениями данных и выполняет сайд-эффекты.
• Жизненный цикл: хуки created, mounted, updated, destroyed (или unmounted в Vue 3). В mounted обычно делают запросы к API.

Пример простого компонента (Vue 3 Options API):

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">Перевернуть</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Привет, Vue!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

Для маршрутизации используется Vue Router, для управления состоянием — Pinia (или Vuex). Для junior достаточно понимать, что компоненты — это кирпичики, реактивность — магия, а директивы — способ связать данные с DOM.