Итоги

В этом уроке вы узнали, что:

• Композабл — это функция, имя которой начинается с use. Она использует ref, computed, watch или хуки жизненного цикла Vue и возвращает то, что нужно компоненту: рефы, вычисляемые значения, функции.
• Он лежит в отдельном файле .js и экспортируется под своим именем: export function useCounter(start) { … }. Компонент импортирует его в фигурных скобках, import { useCounter } from "./useCounter.js";, и вызывает в начале <script setup>.
• Он возвращает несколько значений в объекте, который компонент разбирает, const { count, increase } = useCounter(0);, либо один реф, const name = useLocalStorage("name", "");.
• Параметры делают его пригодным для разных задач: useLocalStorage(key, initial) сохраняет что угодно под любым ключом, а useFetch(url) загружает любой файл.
• Каждый вызов создаёт новые рефы, поэтому у каждого компонента своё состояние. Хуки жизненного цикла в композабле принадлежат компоненту, который его вызвал: useFetch() загружает данные, когда этот компонент монтируется.
• Состояние, общее для нескольких компонентов, — это реф вне любой функции, в модуле, например export const order = ref([]); в order.js, а рядом с ним — функции, которые его меняют. Модуль выполняется только один раз, поэтому каждый файл, который его импортирует, получает один и тот же реф. В больших приложениях для этого используют Pinia.

В следующем уроке, «Итоговый проект», вы соберёте весь курс воедино в собственном приложении — трекере привычек — и узнаете, как делать приложения на Vue на своём компьютере.

Но сначала потренируйтесь на композабле, который считает, как долго компонент находится на странице. Его будут использовать и App.vue, и Timer.vue, и каждый будет считать для себя.