0Pricing
Vue Academy · Урок

Что делает компонуемую функцию хорошей

Соглашение об именовании (useName), инкапсуляция реактивного состояния, возврат ссылок, а не необработанных значений

«Что делает компонуемую функцию хорошей» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Что такое составная функция

Составная функция — это функция, использующая Composition API Vue для инкапсуляции и повторного использования логики, связанной с состоянием. Это ответ Vue 3 на миксины: более чистый, явный и удобный для типизации.

Соглашение о префиксе use

По соглашению имена композаблов начинаются с префикса use: useCounter, useFetch, useMouse. Это сразу показывает, что функция содержит реактивную логику.

function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }

Возвращайте рефы, а не необработанные значения

Возвращайте рефы (или реактивное состояние), чтобы код, который их использует, сохранял реактивность при деструктуризации. Возврат count.value передал бы снимок значения, который больше не обновляется.

function useCounter() {
  const count = ref(0);
  return { count }; // return the ref itself
}

Безопасная деструктуризация

Поскольку Вы возвращаете рефы, код, который их использует, может свободно выполнять деструктуризацию без потери реактивности. Каждый реф сохраняет собственную реактивную связь.

const { count } = useCounter();
// count stays reactive after destructuring

Единственная ответственность

Хороший композабл делает что-то одно. useFetch загружает данные, а useLocalStorage сохраняет их. Небольшие специализированные композаблы аккуратно объединяются в более крупные возможности.

Объединение композаблов

Композаблы могут вызывать другие композаблы, формируя многоуровневую логику. Например, useUserProfile может использовать внутри себя useFetch.

function useUserProfile(id) {
  const { data } = useFetch("/users/" + id);
  return { user: data };
}

Очистка побочных эффектов

Если композабл добавляет обработчики, таймеры или подписки, он должен удалять их в onUnmounted, чтобы предотвращать утечки памяти.

import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));

Принимайте реактивные аргументы

Композаблы могут принимать рефы или функции-геттеры в качестве входных данных и реагировать на них с помощью watch или watchEffect, что делает их гибкими.

function useDouble(source) {
  return computed(() => unref(source) * 2);
}

Избегайте конфликтов имён

Если композабл возвращает много значений, выбирайте понятные имена. Если два композабла возвращают data, переименуйте его при деструктуризации, чтобы избежать конфликтов.

const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");

Следуйте соглашениям фреймворка

Вызывайте композаблы синхронно на верхнем уровне setup (или другого композабла), а не внутри условных блоков или асинхронных обратных вызовов, чтобы хуки жизненного цикла регистрировались правильно.

// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after await

Документация и форма возвращаемого значения

Возвращайте предсказуемый объект, чтобы пользователи знали, что именно они получают. Единообразная форма (состояние и методы) упрощает изучение и использование композаблов.

return { count, increment, decrement, reset };

Быстрая проверка

Почему композабл должен возвращать рефы, а не необработанные значения?

Итоги

Вы узнали признаки хорошего композабла: префикс use, возврат рефов для безопасной деструктуризации, единственную ответственность, очистку побочных эффектов в onUnmounted и предотвращение конфликтов имён в возвращаемом объекте.

Часто задаваемые вопросы

Урок «Что делает компонуемую функцию хорошей» бесплатный?

Да — полный текст урока «Что делает компонуемую функцию хорошей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Что делает компонуемую функцию хорошей»?

Соглашение об именовании (useName), инкапсуляция реактивного состояния, возврат ссылок, а не необработанных значений Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Что делает компонуемую функцию хорошей»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Что делает компонуемую функцию хорошей
  2. useCounter: простой композируемый модуль
  3. useFetch: композируемый модуль для асинхронных данных
  4. VueUse: библиотека композируемых модулей
← Назад к Vue Academy