Как хорошо знаешь Vue?

Как хорошо знаешь Vue?

Это вопрос о глубине знания Vue.js фреймворка. Я отвечу честно и компrehensively.

Краткий ответ

Профессиональный уровень. Знаю Vue 2 и Vue 3, понимаю architecture, best practices, могу делать сложные приложения с оптимизацией.

Vue 2 vs Vue 3: Основные отличия

Vue 2: Options API

export default {
  data() {
    return {
      count: 0,
      name: 'John'
    };
  },
  
  computed: {
    doubled() {
      return this.count * 2;
    }
  },
  
  methods: {
    increment() {
      this.count++;
    }
  },
  
  watch: {
    count(newVal, oldVal) {
      console.log(`changed from ${oldVal} to ${newVal}`);
    }
  },
  
  mounted() {
    // инициализация
  },
  
  beforeDestroy() {
    // очистка
  }
};

Проблемы: логика разбросана по разным секциям, сложно следить за реактивностью.

Vue 3: Composition API

import { ref, computed, watch, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const name = ref('John');
    
    const doubled = computed(() => count.value * 2);
    
    const increment = () => {
      count.value++;
    };
    
    watch(() => count.value, (newVal, oldVal) => {
      console.log(`changed from ${oldVal} to ${newVal}`);
    });
    
    onMounted(() => {
      // инициализация
    });
    
    onUnmounted(() => {
      // очистка
    });
    
    return {
      count,
      name,
      doubled,
      increment
    };
  }
};

Преимущества: логика группируется по функционалу, легче переиспользовать (composables).

Реактивность в Vue

Vue 2: Object.defineProperty для трекинга изменений.

Vue 3: Proxy для реактивности.

Проблемы с реактивностью в Vue 2

// Не реактивно! Добавляется динамическое свойство
this.user.newField = 'value';

// Правильно
this.$set(this.user, 'newField', 'value');
// или
this.user = { ...this.user, newField: 'value' };

Vue 3 это решает

const user = reactive({
  name: 'John'
});

// Просто работает!
user.newField = 'value';

Компоненты и Props

Props validation

export default {
  props: {
    // Типизация
    userId: {
      type: Number,
      required: true
    },
    
    // Со значением по умолчанию
    title: {
      type: String,
      default: 'Default Title'
    },
    
    // Custom validator
    status: {
      type: String,
      validator(value) {
        return ['active', 'inactive', 'pending'].includes(value);
      }
    }
  }
};

Emit события от дочерних к родителю

// Дочерний компонент
<template>
  <button @click="$emit('custom-event', payload)">
    Click me
  </button>
</template>

// Родителя
<ChildComponent @custom-event="handleEvent" />

Lifecycle hooks

// Vue 2
beforeCreate -> created -> beforeMount -> mounted 
-> beforeUpdate -> updated -> beforeDestroy -> destroyed

// Vue 3 (Composition API)
onBeforeMount -> onMounted 
-> onBeforeUpdate -> onUpdated 
-> onBeforeUnmount -> onUnmounted

Slot система

// Родитель
<Modal>
  <template #header>
    <h1>Title</h1>
  </template>
  
  <template #default>
    <p>Content</p>
  </template>
  
  <template #footer>
    <button>Close</button>
  </template>
</Modal>

// Modal компонент
<template>
  <div class="modal">
    <div class="modal__header">
      <slot name="header" />
    </div>
    
    <div class="modal__body">
      <slot />
    </div>
    
    <div class="modal__footer">
      <slot name="footer" />
    </div>
  </div>
</template>

Composables (Vue 3)

Переиспользуемая логика:

// useCounter.js
import { ref, computed } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  
  const doubled = computed(() => count.value * 2);
  
  const increment = () => count.value++;
  const decrement = () => count.value--;
  
  return {
    count,
    doubled,
    increment,
    decrement
  };
}

// Использование в компоненте
<script setup>
import { useCounter } from './composables/useCounter';

const { count, doubled, increment } = useCounter();
</script>

State Management: Pinia (Vue 3) / Vuex (Vue 2)

Pinia store

// stores/counter.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const doubled = computed(() => count.value * 2);
  
  const increment = () => count.value++;
  const reset = () => count.value = 0;
  
  return { count, doubled, increment, reset };
});

// Использование
<script setup>
import { useCounterStore } from '@/stores/counter';

const counter = useCounterStore();
</script>

<template>
  <div>
    <p>{{ counter.count }}</p>
    <button @click="counter.increment">+</button>
  </div>
</template>

Оптимизация производительности

1. Lazy loading компонентов

const HeavyComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
);

2. Keep-alive для кеширования

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

3. Computed vs Method

// Плохо: пересчитывается каждый раз
methods: {
  filtered() {
    return this.items.filter(item => item.active);
  }
}

// Хорошо: кешируется, пересчитается только если изменилась зависимость
computed: {
  filtered() {
    return this.items.filter(item => item.active);
  }
}

Директивы

// Встроенные
v-if, v-show, v-for, v-bind, v-on, v-model

// Пример
<template>
  <div v-if="isVisible">Visible</div>
  <input v-model="message" />
  <button @click="handleClick">Click</button>
  <div :class="{ active: isActive }">Styled</div>
</template>

// Custom directive
const vFocus = {
  mounted(el) {
    el.focus();
  }
};

// Использование
<input v-focus />

Фильтры и трансформация данных

// Vue 2
filters: {
  capitalize: (str) => str.charAt(0).toUpperCase() + str.slice(1)
}

<p>{{ message | capitalize }}</p>

// Vue 3: используются composables или простые функции
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

Сравнение с React

Сложные паттерны

Render функции

export default {
  render(h) {
    return h('div', { class: 'container' }, [
      h('h1', 'Title'),
      h('p', 'Content')
    ]);
  }
};

Scoped slots (продвинутое)

<!-- List компонент -->
<template>
  <div>
    <slot name="item" v-for="item in items" :item="item" />
  </div>
</template>

<!-- Использование -->
<List>
  <template #item="{ item }">
    <div>{{ item.name }}</div>
  </template>
</List>

Заключение

Знаю Vue на уровне:

• Могу разработать полноценное приложение
• Понимаю реактивность и lifecycle
• Использую best practices
• Оптимизирую производительность
• Работал с Vue 2 и Vue 3
• Знаю state management и routing
• Могу обучить других

Однако мой основной фокус последние годы — React. Vue знаю хорошо, но React — это мой основной инструмент.