Изучая Vue.js, обновляя один из моих более простых проектов, TheRadList, веб-приложение ресторана в Эдмонтоне, которое восстанавливает волнение от поиска места, где можно перекусить.
Цель
TheRadList — это проект, который я начал в январе 2018 года. Время от времени я возвращаюсь к нему, чтобы обновить его или использовать для изучения чего-то нового.
Вот общая история обновлений TheRadList:
- Обновить, чтобы мои друзья могли легко изменять контент
- Обновление для изучения Angular 5
- Первоначальный запуск проекта
Теперь я использую его для изучения Vue.js, одного из самых популярных на сегодняшний день веб-фреймворков.
Изучение Vue
Изучить новый фреймворк не так уж сложно, так как многие из них берут концепции друг от друга, и у большинства есть отличные онлайн-инструменты для обучения.
Первое, что я сделал, это зашел в Документацию Vue.js, чтобы посмотреть, чему я могу научиться. Там я нашел серию видео из Vue Mastery под названием «Intro to Vue.js», которая охватывает все основные принципы Vue.js, а также создает образец приложения вместе с вами.
Я не возился с образцом приложения, потому что TheRadList — это мое образец приложения.
Планирование моей архитектуры
Изучив все основные концепции и функции Vue.js, я просмотрел HTML-код TheRadList, чтобы понять, как я могу реорганизовать и обновить его с помощью Vue.js.
Я знаю, что компонент приложения должен получать отправляемые сообщения из компонента фильтра, который затем обновляет компонент списка через реквизиты.
Если возможно, я также хочу, чтобы мои фильтрующие функции могли фильтровать несколько свойств. Но это скорее дальновидная цель.
Создание моего приложения
Рефакторинг всегда должен выполняться постепенно, и это, по сути, то, чем является этот процесс.
Я начал с создания компонентов и постепенно превращал их в то, что мне было нужно, используя документацию и видео из курса основных принципов в качестве справочного материала.
Медленно, но верно я заменил весь функционал предыдущего сайта. Начнем с компонента для главного раздела героя, затем компонента для раздела фильтра и, наконец, самого списка rad.
Комментарии и улучшения
Всегда здорово документировать то, чему вы научились, и то, что вы можете сделать лучше. Что-то, что почти всегда можно улучшить в компонентах и в том, как они работают вместе.
Дополнительные компоненты
Возможно, будут полезны дополнительные компоненты, особенно для пользовательского интерфейса. Например, каждый фильтр в компоненте фильтра может быть отдельным компонентом, это будет означать более компонентно-ориентированный CSS, полезный как для дизайнеров, так и для разработчиков.
Эффективность компонентов
Структура внутренних компонентов — еще один способ улучшить ваше приложение. Я обновил способ передачи filter-props (реквизиты, которые управляют фильтрами списка) в компонент списка, что дало гораздо более читабельный подход, который также хорош для производительности. (функция watch работает медленно)
Причудливая функция стрелки
Мне потребовалось довольно много времени, чтобы понять, почему моя функция часов не работала, когда я пытался отслеживать, когда пользователь переключает представление «Глубокое погружение».
watch: {
expand: (newVal, oldVal)=>{ this.expanded = (newVal=="large") }
}
Согласно StackOverflow, это просто потому, что стрелочные функции (()=>{}) не принимают привязки для this. Другими словами, this внутри них не работает! Простое возвращение к обычному синтаксису функций решило проблему. Хороший урок.
watch: {
expand(newVal, oldVal) { this.expanded = (newVal=="large") }
}
Компоненты одного файла
Что-то, что я хотел бы получить, — это Компоненты одного файла Vue, делающие проекты Vue еще более похожими на Angular и React с разделением задач.
Для простого приложения, такого как TheRadList, я не видел смысла добавлять эту функциональность, поэтому вместо этого я разделил свои компоненты на файлы. Это помогает с абстракцией удобочитаемости, но не так полезно, как сами компоненты с одним файлом.
Результаты
Вы можете посетить TheRadList на www.theradlist.com, но вы не увидите никакой разницы (кроме нескольких исправлений ошибок стиля, которые я нашел). Но теперь вы знаете, что сайт использует Vue.js!
