Vue — реактивность и Composition API
Маршрут Vue
| Шаг | Статья |
|---|---|
| 1 | Первая программа |
| 2 | Обзор |
| 3 | Вы здесь |
| 4 | Router и Pinia |
| 5 | Production |
Реактивность
Vue отслеживает зависимости и перерисовывает шаблон при изменении данных.
Composition API (<script setup>):
<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const double = computed(() => count.value * 2);
</script>
<template>
<button @click="count++">{{ count }} (×2 = {{ double }})</button>
</template>
| API | Когда |
|---|---|
ref | примитивы и одно значение |
reactive | объект целиком |
computed | производное значение |
watch / watchEffect | побочные эффекты |
В шаблоне ref разворачивается автоматически; в script — .value.
Однофайловый компонент (SFC)
.vue файл:
<script setup>
defineProps({ title: String });
const emit = defineEmits(['save']);
</script>
<template>
<h2>{{ title }}</h2>
<button @click="emit('save')">Сохранить</button>
</template>
<style scoped>
h2 { color: var(--ifm-color-primary); }
</style>
scoped ограничивает стили компонентом.
Options API — устаревший стиль
export default {
data() { return { count: 0 }; },
methods: { inc() { this.count++; } },
};
В новых проектах пишут на Composition API (<script setup>). Options API всё ещё встречается в старых кодовых базах.
Директивы
| Директива | Пример |
|---|---|
v-if / v-else | условие |
v-for | v-for="item in items" :key="item.id" |
v-model | двусторонняя привязка |
v-on / @ | события |
v-bind / : | атрибуты |