Vue 3 (Composition API) и TypeScript – Фундаментальный курс 2023

В этом видео создадим игру "Виселица" на Vue 3 (Composition API) и Typescript. Разберем все тонкости типизации Vue приложения.

Верстка (папка layout) и финальный код можно скачать по ссылке:

[nasipsalmakhunov]

Круто, спасибо! Жду еще проектов Vue 3 (Composition API) и TypeScript :D

[Chudikfilosof]

Очень интересно было делать такой проект. Спасибо за комментарии которые даешь дополнительно, объясняя как работает TS и в принципе логику происходящего, а то мне как новичку пока сложно за всем уследить кто за что отвечает. Очень приятно что не остановился на готовом работающем коде, а показал как можно рефакторить его - это оооочень ценно! То что, как ты сказал "тупил" - в этом есть особая прелесть - показываешь что ты это делаешь в режиме реального времени и ты реальный человек который рассуждает. Павел - ты супер! 🔥

[alexeymatveev]

Это просто вау. Спасибо огромное. Буду ждать других видео.

[Mr_Enotkin]

Сначала несколько напрягал измененный голос - ну не серьезно как-то! :) Но содержимое все перевешивает! Я прям крайне удивлен. Наконец кто-то смог вырваться из проклятья TODO-листа и сделать что-то нормальное, и креативное! Ну сложность порадовала - не совсем для детского сада. В дальнейшем хотелось бы увидеть постепенное возрастание сложности примеров, пусть это и будет растягиваться на несколько таких видео. А то в русскоязычном сегменте на composition прям совсем голяк.

[ValiantsinYushkevich]

Пара замечаний по ролику
1. ключ для элементов списка не надо использовать индекс, это прокатывает но это порочная практика для крупных списков или компонентов где несколько динамических списков. Приемлемым тут было формировать ключ по комбинации символ + индекс
2. проверку символа к регулярке надо выносить в отдельную функцию и вызывать внутри проверки условия if, иначе для каждого раза проверки она пересоздается и сборщик мусора вынужден убивать созданную для прошлой проверки функцию. После рефакторинга применил более удачное решение.
3. вычисления внутри шаблона делать не желательно, применять тернарники в том числе, если шаблон будет перерисовываться по любым основаниям все эти вычисления будут пересчитаны, это не производительно, поэтому всем им место в компьюетед свойствах
4. при импортах компонентов лучше использовать абсолютные пути, начинающиеся с @
5. Выносить функционал как показал автор надо только в 2 случаях, если он используется в разных местах приложения, или размер компонента перевалил за золотой стандарт 300 строк, выносить абы выносить не надо. Достаточно сгрупировать по принципу выполняемой функциональности. Иначе снижается читаемость, приходится проваливаться в use импорты чтобы понять что они делают и соответственно что делает компонент с их участием.
За применение тайпскрипта автору респект

[fuad]

Очень крутой канал, огромное вам спасибо) Желаю удачи с развитием канала!!!

[aweb_]

Вот это интересно! Благодарочка, лайк и подписка!
Ждем больше контента composition api+ts

[ya_aan]

Ждем видео со скрипт setup и подробное объяснение всех действий) И вместо маковых данных предлагаю создать фейковую БД, либо взять какую нибудь апишку

[gyvxzmh]

Спасибо большое за практику. Очень помогла 🔥🔥🔥

У кого в конце видео появилась проблема с повторяющимися буквами в ошибках, добавьте return после showNotification():

window.addEventListener('keydown', ({ key }) => {
if( isWin.value || isLose.value ) {
return
}


showNotification()
return
}

[ВладимирДробышев-зф]

Отличный видос, бро! Давай еще что нить запилим на Vue 3 Composition API и TypeScript))

[mysoul]

Топовый курс, продолжай в том же духе, курсы такого уровня на vue еще не встречал, буду следить за новыми видосами, хотелось бы побольше про vue + composition API + Ts, было бы прикольно посмотреть какой нибудь проект в лайв режиме

[sergeyf]

Очень крутой контент, подписался. Смог сделать тестовое на vue, хотя не разу его в глаза не видел, но работал на реакте и ангуляре. Не бросай делать ролики, очень хорошо объясняешь.
Ps немного напрягает мультяшный голос но со временем привык)

[maxsolo]

Шикарная практика! Прошёл на одном дыхании! Не заметил, как время пролетело. В одном видео база, которые многие умудряются растягивать на 20 часов. Топ!

[djbeatlike]

Отличный ролик и пример для объяснения. За час базу подтянул, спасибо!

[Ctrl_C.Ctrl_V]

Спасибо, очень информативное видео! Не останавливайся, у тебя круто получается !)

[Vladislav]

Спасибо большое за такой контент (vue+ts). Очень не хватает видео на данную связку. Жду новых видео!

[IvanIsayev]

Еще бы голос не коверкался — вообще хорошо бы было :) А так супер! продолжай!

[ural-site]

Урок бомбический, покройте это код тестами или может есть уже уроки про тесты?

[tatianovnafrutti]

Крутой контент спасибо! Изменение голоса правда все портит но всеж.. ) А еще вопрос такой: зачем в ref брать переменную обычную? ту же "василий", почему просто нельзя её задать без реф? и вот такие моменты.. Мне казалось рефы только для ДОМ элементов...

[Chudikfilosof]

В самом конце видео после рефакторинга уведомления о повторном символе, в App.vue, после showNotification() нужен return. А то без этого повторные символы всё равно можно будет вводить