Оригинальный адрес:What Does Vue 3.0 Mean for Web Development?
Оригинальный автор:Matt Maribojoc
Переводчик: Эмпл
Новый год для Vue2.6 тихо выпущен 🎉🎉🎉
предисловие
В ноябре прошлого года создатель Vue Эван Ю показал нам Vue 3.0 — последнюю версию растущего фреймворка Javascript. Эти оптимизации делают Vue более эффективным, более модульным и простым в использовании. Я расскажу об этих изменениях и о том, что, по моему мнению, они повлияют на существующую разработку после выпуска Vue 3.0.
Что такое Vue сейчас?
По их собственным словам, Vue — это «прогрессивный фреймворк для создания пользовательских приложений». Он разработан так, чтобы быть достаточно гибким, чтобы включать одну библиотеку Vue в другие проекты или полностью управлять сложными проектами с помощью Vue.
Vue часто считают одним из наиболее понятных и простых в реализации фреймворков. Поддерживаются простые шаблоны HTML, а такие инструменты, как React, используют Javascript для определения элементов DOM.
По состоянию на начало 2019 года мы все еще используем Vue 2.0. Хотя доля рынка Vue по-прежнему невелика по сравнению с React и Angular, популярность Vue продолжает расти. На мой взгляд, выпуск Vue 3.0 повысит его использование и продвинет его как замену другим основным фреймворкам.
На приведенной ниже диаграмме показано, насколько каждый фреймворк используется в работе. Как видите, VueJS еще предстоит пройти долгий путь, прежде чем он приблизится к текущему отраслевому стандарту. (источник:TechMagic)
Самое очевидное изменение в Vue3.0
В своем выступлении Эван Ю выделил пять ключевых изменений в Vue 3.0:
1. Быстрее
2. Меньше
3. Легче поддерживать
4. Более нативная поддержка
5. Проще разрабатывать и использовать
Теперь давайте погрузимся в них.
сделай это быстрее
Эта тема занимала большую часть разговора Эвана Ю, поскольку она претерпела самые большие технические изменения и явно была одним из основных преимуществ Vue прямо сейчас.
VueJS уже известен своей скоростью рендеринга. В своих сравнительных тестах он превзошел другие фреймворки. Однако количество пограничных случаев и исправлений в коде Vue 2.0 заставило команду Vue решить полностью переписать код рендеринга с микрооптимизациями. По словам Эвана Ю, эти оптимизации могут увеличить скорость установки и инициализации на 100%.
Как и другие фреймворки, VueJS использует виртуальный DOM для рендеринга своих компонентов. Чтобы ускорить процесс рендеринга, необходимо уменьшить нагрузку на этот виртуальный DOM. Vue 3.0 включает следующие функции для достижения этой цели:
Советы по компиляции- Извлекая процесс рендеринга, Vue 3.0 будет выводить лучшие подсказки во время компиляции, которые показывают, как можно лучше оптимизировать код.
Быстрое подтверждение компонента- Больше не нужно проверять, является ли объект шаблона компонентом, Vue 3.0 будет принимать заглавные буквы как компонент. Это предположение устраняет догадки и ускоряет процесс рендеринга.
Симплексный вызов(Мономорфные вызовы) — у любого, кто прошел курс информатики, в голове есть концепция полиморфизма, но Vue 3.0 использует мономорфные вызовы при рендеринге. Эта микрооптимизация всегда передает объекты одинаковой формы механизму рендеринга, что упрощает оптимизацию для механизмов Javascript. Изображение ниже взято из речи Эвана Ю о Vue 3.0.
Оптимизированные слоты--- Этот, казалось бы, сложный термин на самом деле сводится к простой концепции: убедитесь, что зависимости отслеживаются с помощью их экземпляров. В настоящее время родительские и дочерние компоненты будут вынуждены повторно отображать каждый раз, когда у них будут обновлены зависимости. Однако в версии 3.0 родительский и дочерний элементы будут иметь разные зависимости и будут обновляться только при изменении их соответствующих зависимостей. Это значительно снижает количество повторных рендеров, происходящих на странице.
повышение статического дерева--- Хотя это не считается обновлением Vue 3.0 (оно уже присутствовало в Vue 2.0), улучшения статического дерева значительно повысили скорость проекта. Подъем означает, что статические элементы без каких-либо зависимостей не перерисовываются, что значительно сокращает работу с виртуальной DOM и экономит много накладных расходов на проект.
Proxy Based Observations- Vue 3.0 будет использовать наблюдения на основе прокси ES2015 для отслеживания изменений в элементах. Это изменение не только устраняет несколько случаев, которые Vue 2.0 не поддерживает, но и улучшает производительность. Согласно презентации You, эти оптимизации могут сделать инициализацию экземпляра компонента на 100% быстрее, чем в текущей версии 1vue2.0.
Реализация на основе прокси в два раза быстрее, чем реализация на основе наблюдений, а использование памяти составляет лишь половину от реализации наблюдений в Vue 2.0.
более легкий
В настоящее время VueJS довольно мал (20 КБ Gzip). Однако в Vue 3.0 предполагаемый размер для 3.0 составляет около 10 КБ Gzip из-за встряхивания дерева (удаления ненужного кода). Это делается путем удаления всех библиотек, которые не требуются для проекта Vue, и использования их с помощью операторов импорта (вместо того, чтобы упаковывать их в основной src).
Улучшить ремонтопригодность
Переход к TypeScript--- Чтобы сделать его более доступным для большего числа пользователей, Vue 3.0 преобразует Flow в TypeScript. Хотя кодовая база будет переписана для использования Typescript, она по-прежнему совместима с javascript.
более модульный—— По сравнению с текущим Vue, Vue 3.0 будет более модульным, он полагается на собственный внутренний пакет для запуска. Это делает его настраиваемым и гибким, а также прозрачным, предоставляя разработчикам реальный доступ к исходному коду.
Компилятор переписать--- Это одна из функций, которые меня больше всего интересуют. Эти изменения не только обеспечивают лучшую поддержку IDE, но и теперь создают исходные карты, а это означает, что при возникновении ошибки во время выполнения будет указано неверное расположение файла и номер строки. Если вы используете Vue прямо сейчас, вы знаете, что в наши дни сообщения об ошибках во время выполнения не очень помогают в выявлении проблем. Этого обновления должно быть достаточно, чтобы поднять разработчикам хорошее настроение.
Легче настроить таргетинг на нативные
3.0 не будет зависеть от платформы, то есть будет работать на чистом Javascript и не будет использовать веб-функции, такие как Node.js, в своей основной сборке. Это упрощает создание приложений для Интернета, iOS или Android. Позиционируя себя как Native, Vue становится скорее заменой React, который обеспечивает большую поддержку проектов iOS и Android.
Облегчить жизнь разработчикам
Несмотря на обманчивую простоту, я думаю, что это основная причина использования VueJS — он простой, но мощный. Это важные аспекты.
Откройте API реактивности--- После публикации новые изменения дадут разработчикам возможность явным образом создавать реактивные объекты. А также создание пользовательских хуков повторного рендеринга. Версия 3.0 также устраняет распространенную жалобу пользователей VueJS: когда и почему мой компонент перерисовывается?
Теперь есть событие renderTrigged, которое позволяет людям увидеть, что вызвало обновление. Волшебная функция, которая сделает VueJS более прозрачным.
So What?
Вы можете подумать: «Ну и что? Люди по-прежнему будут использовать React или Angular. Возможно, вы правы. В соответствии с текущими отраслевыми стандартами React и Angular, вероятно, по-прежнему являются наиболее популярным выбором для компонентных фреймворков. темы для обсуждения в версии 3.0, которые могут сделать ее более конкурентоспособной на долгие годы.
скоростьДаже сейчас VueJS предлагает более быстрое время рендеринга, чем React или Angular. Благодаря микрооптимизациям, обсуждаемым Эваном Ю, у Vue может быть вдвое меньше времени рендеринга, чем у других фреймворков. Это ключевой момент, который может отвлечь некоторых разработчиков от других сред. В таблице ниже показаны преимущества скорости и памяти, которые уже есть у Vue 2.0 — новое обновление должно еще больше улучшить эти преимущества.
приспособляемостьVueJS разработан так, чтобы его было легко реализовать. Независимо от того, добавляете ли вы его в существующий проект или используете для включения SPA, существует множество документации и примеров использования, которые помогут вам определить ваши требования. Изменения, внесенные в Vue 3.0, особенно хуки реактивности и новый модульный дизайн, делают этот и без того гибкий язык еще более мощным. Хотя я буду продолжать подчеркивать простоту VueJS, существует множество функций, которые позволяют более техническим и опытным разработчикам полностью контролировать свои проекты. Хотя я буду продолжать подчеркивать простоту VueJS, существует множество функций, которые позволяют более опытным и опытным разработчикам полностью контролировать свои проекты.
ДокументацияЭто может быть «моей проблемой», но лично я нахожу документацию Vue более понятной, чем документацию React. На самом деле, я даже не закончил учебник HelloWorld или что-то о Vue. Мне достаточно документации, чтобы понять вариант использования и начать работу. вы можете сами убедитьсяОфициальная документация Vue.
трудностьКак я говорю о документации — Vue очень доступен. Он не только использует естественный HTML, препроцессоры CSS/CSS (такие как sass и scss) и Javascript, но также предоставляет большую поддержку и библиотеки для относительно новых фреймворков. Это очень легко понять для новых разработчиков и очень легко расширить для опытных разработчиков.
Чтобы увидеть полное влияние Vue 3.0, нам придется подождать до 2019 года (надеюсь). Функции, продемонстрированные Эваном Ю на VueConf Toronto, похоже, делают Vue более мощным и эффективным, поэтому я возлагаю большие надежды на новую версию. Что вы думаете о Vue 3.0 и новом React, Angular?