Comments 21
Как по мне vue 2 с vue-class-component как-то по изящнее выглядит.
toRefs нужен для того, чтобы сделать пропсы реактивными, так как при const { exampleProps } = props реактивность потеряется. В любом случае в setup они доступны в объекте props. Например props.exampleProps 
Во втором примере лучше использовать reactive, а не ref для объекта.
nuxtjs/composition-api- примеры кода буду показывать с использованием данной библиотеки. В базе она использует тот жеvuejs/composition-apiи добавляет ряд своих методов для интеграции с nuxt.
@JuliWolf
Последняя версия nuxtjs/composition-api тянет напрямую из Vue. Обновите nuxtjs/composition-api до последней версии и Vue до 2.7, б0льшая часть импортов уйдет, бандл станет весить меньше.
setup(props) { ... }
Возвращать пропсы из
setupне нужно. Они и так будут доступны в template.
Возвращать из setup ничего не нужно, если использовать синтаксис <script setup lang="ts"></script>. Исключением являются composables. Почему не используете?
setTimeout
Можно использовать useTimeoutFn() из https://vueuse.org/shared/useTimeoutFn/, тогда тянуть хуки из Vue и clearTimeout делать не нужно.
Pinia, Render functions, VueUse не используете на проекте?
с учетом того что мы работаем в рамках nuxt2, который за собой тянет такие фишки на asyncData и fetch использовать setup не представляется возможным, но в целом да, если писать именно <script setup lang="ts"></script> то возвращать ничего не нужно.
vueuse это отдельная библиотека, и мы ее не используем. В целом стараемся как можно меньше библиотек тянуть если нет большой необходимости.
На pinia будем переходить не все сразу, в основном проекте пока vuex
Мы один из проектов изначально делали на vite +vue3 + pinia, когда пробовали что такое vue3 вообще. Получилось очень симпатично
с учетом того что мы работаем в рамках nuxt2, который за собой тянет такие фишки на asyncData и fetch использовать setup не представляется возможным
А как это связано между собой? @nuxt/composition-apiпредоставляет useFetch() и useAsync(), да и тэги можно совмещать
<script lang="ts">legacy</script>
<script setup lang="ts">modern</script>Я делал то же самое - мигрировал с Class Api Nuxt2 на Composition Api, и это не мешало мне использовать script setup синтаксис - наоборот, сильно помогло
vueuse это отдельная библиотека, и мы ее не используем. В целом стараемся как можно меньше библиотек тянуть если нет большой необходимости.
Всякий мусор - понятно, но эта можно сказать мастхэв для современных проектов на Vue, она поддерживает тришейкинг и упростит миграцию на Nuxt3, я потому и написал что заметил много лишнего кода, где можно было обойтись одной функцией
Я делал то же самое - мигрировал с Class Api Nuxt2 на Composition Api, и это не мешало мне использовать script setup синтаксис - наоборот, сильно помогло
А у вас заработали вызовы useAsync useFetch как они должны? У меня с этим были проблемы, замечала что ничто из этого на стороне сервера будето не вызывается
Касательно библиотеки, у меня есть мысля ее посмотреть на предмет реализации некооторых фич и скорее всего какие-то идеи оттуда забрать, но так чтобы прям всю забирать пока наврятли, но в целом на будущее учту)
да с ssr useFetch у накста проблемы тут
А у вас заработали вызовы useAsync useFetch как они должны? У меня с этим были проблемы, замечала что ничто из этого на стороне сервера будето не вызывается
Были проблемы только с этим, я думаю об этом и речь
❌ Top-level
awaitin<script setup>(Vue 2 does not support async component initialization)
Решается комбинированными тэгами script с fetch/asyncData и script setup с остальной логикой. Я бы также предпочел запросы вынести во vuex/pinia, а в компонентах только вызовы дергать. И, кстати, vue meta тоже должен использовать обычный скрипт или можно взять useHead() из VueUse, в nuxt3 используется именно он, к слову о библиотеках (https://v3.nuxtjs.org/getting-started/seo-meta/). Резюмируя - ничто из этого реально не может мешать использованию сетапа
но так чтобы прям всю забирать
Я этого и не предлагал, либа тришейкается - тянутся только те функции, которые используете
А зачем идентификатор таймера сделан реактивным?
https://vuejs.org/api/reactivity-advanced.html#onscopedispose удобно использовать для composables которые должны автоуничтожаться.
(12): добавлю, что defineEmits теперь гораздо важнее чем во vue2. Например, имеется компонент CustomButton типа `<template><button \@click="logAnalyticsAndClick"><slot /></button></template>`. Если defineEmits не определен, onClick будет вызываться дважды (один раз - emit из внутреннего метода logAnalyticsAndClick, второй - из-за inheritAttrs, onClick будет проброшен в корневой элемент у CustomButton).
(15): Еще defineExpose должен быть определен, и тогда типизация ref на child component может быть описана как const child = ref<InstanceType<typeof SomeChild>>()
(19): Можно еще через InjectionKey типизацию для provide/inject указать.
В прошлом году тоже начали переезд с vue2 + class-components + vuex на vue3 + pinia, сам переезд на vue3 занял где-то полтора месяца, еще полгода ушло на переписывание 800 классовых компонентов на composition api и примерно столько же на миграцию 100 модулей vuex на pinia. Удачи в этом нелегком деле ✊🏻
Миграция с vue-class-component на vuejs/composition-api