Vue 3 (Composition API) и TypeScript - Фундаментальный курс 2023
Вставка
- Опубліковано 31 тра 2023
- В этом видео создадим игру "Виселица" на Vue 3 (Composition API) и Typescript. Разберем все тонкости типизации Vue приложения.
Верстка (папка layout) и финальный код можно скачать по ссылке:
github.com/pavellbor/hangman-... - Наука та технологія
Круто, спасибо! Жду еще проектов Vue 3 (Composition API) и TypeScript :D
Супер! Спасибо за интересный контент)
Вот это интересно! Благодарочка, лайк и подписка!
Ждем больше контента composition api+ts
Спасибо! Очень полезное видео!
Спасибо большое за такой контент (vue+ts). Очень не хватает видео на данную связку. Жду новых видео!
Это просто вау. Спасибо огромное. Буду ждать других видео.
Отличный ролик и пример для объяснения. За час базу подтянул, спасибо!
Очень крутой канал, огромное вам спасибо) Желаю удачи с развитием канала!!!
Очень интересно было делать такой проект. Спасибо за комментарии которые даешь дополнительно, объясняя как работает TS и в принципе логику происходящего, а то мне как новичку пока сложно за всем уследить кто за что отвечает. Очень приятно что не остановился на готовом работающем коде, а показал как можно рефакторить его - это оооочень ценно! То что, как ты сказал "тупил" - в этом есть особая прелесть - показываешь что ты это делаешь в режиме реального времени и ты реальный человек который рассуждает. Павел - ты супер! 🔥
Большое спасибо, очень приятно!
new
@@mgfck new
Круто! Спасибо
Пара замечаний по ролику
1. ключ для элементов списка не надо использовать индекс, это прокатывает но это порочная практика для крупных списков или компонентов где несколько динамических списков. Приемлемым тут было формировать ключ по комбинации символ + индекс
2. проверку символа к регулярке надо выносить в отдельную функцию и вызывать внутри проверки условия if, иначе для каждого раза проверки она пересоздается и сборщик мусора вынужден убивать созданную для прошлой проверки функцию. После рефакторинга применил более удачное решение.
3. вычисления внутри шаблона делать не желательно, применять тернарники в том числе, если шаблон будет перерисовываться по любым основаниям все эти вычисления будут пересчитаны, это не производительно, поэтому всем им место в компьюетед свойствах
4. при импортах компонентов лучше использовать абсолютные пути, начинающиеся с @
5. Выносить функционал как показал автор надо только в 2 случаях, если он используется в разных местах приложения, или размер компонента перевалил за золотой стандарт 300 строк, выносить абы выносить не надо. Достаточно сгрупировать по принципу выполняемой функциональности. Иначе снижается читаемость, приходится проваливаться в use импорты чтобы понять что они делают и соответственно что делает компонент с их участием.
За применение тайпскрипта автору респект
А могли бы дать ссылку на гит или любой другой источник(куда бы Вы могли залить), отрефакториного кода? Если Вас не затруднит, я просто учусь и для меня такие вещи: как делать правильно и лучше и вот все такое - прям очень важно и интересно, очень бы помогли ).
форточку открой. автор показал возможную реализацию на свой взгляд, а как правильно неправильно, решать не тебе, в комментариях, а команде, с которой работаешь
@@tatianovnafrutti8982 привет, напиши электронную почту свою или телегу
Спасибо, очень информативное видео! Не останавливайся, у тебя круто получается !)
Сначала несколько напрягал измененный голос - ну не серьезно как-то! :) Но содержимое все перевешивает! Я прям крайне удивлен. Наконец кто-то смог вырваться из проклятья TODO-листа и сделать что-то нормальное, и креативное! Ну сложность порадовала - не совсем для детского сада. В дальнейшем хотелось бы увидеть постепенное возрастание сложности примеров, пусть это и будет растягиваться на несколько таких видео. А то в русскоязычном сегменте на composition прям совсем голяк.
Шикарная практика! Прошёл на одном дыхании! Не заметил, как время пролетело. В одном видео база, которые многие умудряются растягивать на 20 часов. Топ!
Спасибо большое за практику. Очень помогла 🔥🔥🔥
У кого в конце видео появилась проблема с повторяющимися буквами в ошибках, добавьте return после showNotification():
window.addEventListener('keydown', ({ key }) => {
if( isWin.value || isLose.value ) {
return
}
if(letters.value.includes(key)){
showNotification()
return
}
Thank you very much!
спасибо бро круто)
Ждем видео со скрипт setup и подробное объяснение всех действий) И вместо маковых данных предлагаю создать фейковую БД, либо взять какую нибудь апишку
Отличный видос, бро! Давай еще что нить запилим на Vue 3 Composition API и TypeScript))
Урок бомбический, покройте это код тестами или может есть уже уроки про тесты?
Очень крутой контент, подписался. Смог сделать тестовое на vue, хотя не разу его в глаза не видел, но работал на реакте и ангуляре. Не бросай делать ролики, очень хорошо объясняешь.
Ps немного напрягает мультяшный голос но со временем привык)
Топовый курс, продолжай в том же духе, курсы такого уровня на vue еще не встречал, буду следить за новыми видосами, хотелось бы побольше про vue + composition API + Ts, было бы прикольно посмотреть какой нибудь проект в лайв режиме
Или вообще про архитектуру приложений на Vue
Было бы также интересно посмотреть урок про VueX + TypeScript
@@mysoul1632 new
давай ещё че нить. по Nuxt, к примеру
Верстка лежит здесь (папка layout)
github.com/pavellbor/hangman-vue-ts
В самом конце видео после рефакторинга уведомления о повторном символе, в App.vue, после showNotification() нужен return. А то без этого повторные символы всё равно можно будет вводить
спасибо за видео
жду еще крутых работ давно небыло
подскажи если возможно как ты задеплоил на версел? у меня закрашилось при деплое (((
Крутой контент спасибо! Изменение голоса правда все портит но всеж.. ) А еще вопрос такой: зачем в ref брать переменную обычную? ту же "василий", почему просто нельзя её задать без реф? и вот такие моменты.. Мне казалось рефы только для ДОМ элементов...
Классно все, понятно, но голос не очень, сбивает с толку немного
Спасибо за видео, все круто и понятно. А какой шрифт вы используете в редакторе кода ?
Привет! Тема встроенная: Dark Modern. Шрифт по умолчанию.
Классно, а чем модулировали голос? :) "Введу букву АШ (ш)" - это круто
делаю с вами, но везде краснота. подчеркивает даже import {ref} from 'vue' (Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option)
жаль что при таком голосе на полуторной скорости не посмотреть. и вопрос к автору. а вот подобное но не с vue файлами, а если js и в них старым способом писать активную часть а шаблон в html файлах в теге скрипт?
Давайте похоливарим. А насколько это правильно управлять методами дочернего компонента извне? Я, конечно, тоже так делал пару раз, но мне лично кажется, что этого стоит избегать при возможности. Что думаете?
Вместо index === [...].length - 1, можно использовать index === [...].lastIndex
Я не специалист, но разве не через emits прокидывать надо? Разве родитель должен иметь доступ к дочерним элементам?
Благодарю. Подписался.
а баг с тем, что ТС ругается, вернулся в конце видео) не вылечили)
Было бы круто увиделть материал по вебсокетам на накст 3 с обьяснениями
На русскоязычном пространстве ютуба днём с огнём не сыщешь такого материала
Заранее спасибо!
Там особо нечего объяснять, создал экземпляр сокета по адресу, подписался на события, ловишь их и как то реагируешь на фронте
Прикольный проект, спасибо, подскажите сколько вы занимаетесь разработкой уже? Довольно быстро задачи решаете.
3 года (1 год на Vue)
@@mgfck вы молодец) код хорош) (о себе 3 года на nuxt 2). На composition свои приложения пишу схожим образом
покажешь как архитектуру больших приложений делать мультиязычность мульти селекты и мульти формы а также авторизация и роли пермишены?
Мультиязычность i18n, мультиселекты не понятный вопрос, мультиформы на вью делаются изи, несколько компонентов внутри формы показываем каждый из них в зависимости от текущего шага, сама форма помнит все состояние. Авторизация , при загрузке приложения проверил если пользователь не авторизован перенаправил на логин, авторизация стандратно запросами на сервер и получением токена. Роли делаются на вью гвардах, самый популярный beforeEach перед переходом на страницу чекает допуски пользователя и мета инфу роута куда собрались ломится если совпадают пропускает переход если не редирект.
@@ValiantsinYushkevich Спасибо! Круто
А VueX будет ?
по какой - то причине не вводится 1 буква, интересно почему?
Интересно было бы узнать, почему Vue так и не одолел React по популярности. Помню одно время ему пророчили первое место во фронте. Даже говорили, что с выходом 3й версии он порвет React. Но воз и ныне там. Даже относительно новые библиотеки, типа Svelte, отвоевывают свою долю. А Vue, такое впечатление, только сдает позиции. В чем проблема?
Как ты сделал такой голос?
Вот такая ошибка
error 'defineProps' is not defined
Почему у вас без import {defineProps} from "vue"; всё работает?
Импортировать defineProps не обязательно, ровно как и defineEmits. Vue делает это сам под капотом. Чтобы не было ошибки надо ввести комментариий выше вызова, который отключает это предупреждение. Уже не помню точно, но Webstorm например автоматом вставляет.
@@ZaurmagRu Не понял какой комментарий? У меня не Webstorm ругается. А красный экран в браузере
@@KimarTV Странно, что в браузере ошибка. По идее не должно быть...
Ну какой вайт? вит - ну елки палки
Тащить ради 1 урла целую библиотеку не стило, Fetch API более чем достаточного для этого. Win и Lose не стоило тащить в хук, это отдельная часть логики, которая просто использует экспортируемые переменные из хука.
зачем нам correctLetters, если такую же проверку можно было сделать и просто с letters? Лишее computed свойство
Да, можно было. correctLetters используется просто для того чтобы не передавать весь массив, а передать уже отфильтрованный, не более
@@Ctrl_C.Ctrl_V а в этом же нет смысла. Массив все равно передается по ссылке. А вот лишняя переменная, ещё и вычисляемая, в данном случае избыточна :)
Да всё верно, я и не спорю) Ну мб автор увидит и ответит зачем так сделал))@@user-rz7xz4wf8p
буква "ш" это у нас вообще-то "ша", а не "аш" 🙃😉
Зря голос изменил, дизлайк , не возможно слушать ушами...
А у меня опять какое-то проклятье началось: сразу после выноса GameHeader в отдельный компонент в VSCode ошибка висит:
Не удалось найти файл объявления модуля "./components/GameHeader.vue". "d:/dev/viselnik/src/components/GameHeader.vue" имеет неявный тип "any".ts(7016)
У всех все так легко и просто на видео получается, а в жизни сидишь до 3 часов ночи и не понимаешь, что делать надо, и ни гугл, ни чатЖПТ не помогают😄 как исправить-то?