Реактивность ref и reactive — Vue.js — Aduca

Реактивность — автоматическое обновление DOM при изменении данных. ref() оборачивает примитив или объект; доступ в script — через .value, в template — без .value.

reactive() делает реактивным объект (не примитив). Vue отслеживает чтение и запись, перерисовывает зависимые части шаблона.

Не разрушайте реактивность деструктуризацией без toRefs — потеряете связь с исходным объектом.

ref

import { ref } from 'vue'
const count = ref(0)
count.value++ // в script
// {{ count }} в template

reactive

import { reactive } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
state.count++

На заметку: Для одного значения удобнее ref; для группы полей — reactive или один ref с объектом.

Игра Упражнение

Содержание книги

Всего: 15 глав

Книга, игра и упражнения доступны без регистрации. Видеоуроки — после оплаты курса.

Vue.js — прогрессивный JavaScript-фреймворк для пользовательских интерфейсов. Его можно подключать по частям: от простого виджета на странице до полноценного SPA.Vue 3 использует реактивную систему на Proxy, Virtual DOM...

Читать главу

Игра Упражнение

Точка входа — main.js: createApp(App) создаёт экземпляр приложения, .mount('#app') монтирует его в DOM-элемент из index.html.Корневой компонент App.vue содержит <template>, <script> и опционально &l...

Читать главу

Игра Упражнение

Шаблон Vue — декларативная разметка с директивами. v-bind (или :) привязывает атрибуты; v-if / v-else / v-show управляют отображением; v-for рендерит списки.Интерполяция {{ }} выводит выражения из script. v-html вставляе...

Читать главу

Игра Упражнение

Реактивность — автоматическое обновление DOM при изменении данных. ref() оборачивает примитив или объект; доступ в script — через .value, в template — без .value.reactive() делает реактивным объект (не примитив). Vue отс...

Читать главу

Игра Упражнение

computed() — вычисляемое свойство с кешированием: пересчитывается только при изменении зависимостей. Удобно для фильтрации, форматирования, производных значений.watch() и watchEffect() отслеживают изменения и выполняют п...

Читать главу

Игра Упражнение

v-on (или @) вешает обработчик: @click, @submit, @input. Модификаторы: .prevent, .stop, .once, .enter для клавиатуры.Методы объявляют в script setup как обычные функции. Передача аргумента: @click="save(item)"....

Читать главу

Игра Упражнение

v-model — синтаксический сахар для двусторонней привязки. На input: :value + @input. Для checkbox — boolean; для radio — выбранное value; select — value option.Модификаторы: .lazy (change вместо input), .number, .trim. v...

Читать главу

Игра Упражнение

Компонент — переиспользуемый блок UI с собственным шаблоном, логикой и стилями. Импорт в script setup и использование как тег в template.Именование: PascalCase в script, kebab-case в DOM. scoped стили ограничивают CSS ко...

Читать главу

Игра Упражнение

Props — данные от родителя к ребёнку (односторонний поток). defineProps({ title: String, count: { type: Number, default: 0 } }).emit — события от ребёнка к родителю: defineEmits(['save']), $emit('save&#039...

Читать главу

Игра Упражнение

slot — место для контента от родителя. Default slot: <slot />. Именованные: <slot name="header" />, в родителе <template #header>.Scoped slot передаёт данные в слот: <slot :item="item&...

Читать главу

Игра Упражнение

Composition API группирует логику по функциям, а не по опциям (data, methods). composable — функция useXxx(), возвращающая реактивное состояние и методы.Хуки жизненного цикла: onMounted, onUpdated, onUnmounted. onMounted...

Читать главу

Игра Упражнение

Vue Router — маршрутизация SPA. createRouter с routes и history mode (createWebHistory или createWebHashHistory).router-link — навигация без перезагрузки; router-view — outlet для компонента страницы. Динамические маршру...

Читать главу

Игра Упражнение

Pinia — официальный store для Vue 3. defineStore('id', { state, getters, actions }). В компоненте: const store = useUserStore().state — реактивные данные; getters — вычисляемые из state; actions — методы (async...

Читать главу

Игра Упражнение

Данные с сервера загружают в onMounted или watch. fetch или axios. Состояния: loading, error, data — три ref для UX.async/await в script setup. Обработка ошибок try/catch. Для повторного использования — composable useFet...

Читать главу

Игра Упражнение

npm run build — production-сборка в dist/. Vite минифицирует JS/CSS, tree-shaking, code splitting. npm run preview — локальная проверка dist.Переменные окружения: .env, import.meta.env.VITE_*. На хостинг заливают dist (N...

Читать главу

Игра Упражнение

Предыдущий урок

К содержанию курса

Следующий урок

Курс

Книга бесплатно

Все главы Интерактивная игра