4 важных изменения Vue.js 2.4.0

Автор оригинала: Anthony Gore.

Vue.js 2.4.0 был выпущен с обилием новых функций, исправлений и оптимизации.

В этой статье я дам поломка четырех новых функций, которые, как я думаю, самые интересные, в том числе:

1. Серверный рендеринг асинхронных компонентов
2. Наследование атрибутов в компонентах обертки
3. Поддержка Async Компонент для WebPack 3
4. Сохранение HTML Комментарии в компонентах

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/07/17.

Перед Vue 2.4.0 компоненты Async не смогли быть визуализированным сервером; Они были просто игнорированы на выходе SSR и оставили клиенту для генерации. Это дало асинкому компонентам значительный недостаток, и исправления проблемы позволяет намного лучше PWA с Vue.

Async компоненты

Асинхронные компоненты действительно удобны. Если вы следуете в этом блоге, я много писал о них в последнее время. В двух словах, они позволяют вам разделить свое приложение для того, чтобы не важные компоненты (модали, вкладки, привязки, остальные, другие страницы и т. Д.) Могут загрузить после Начальная страница нагрузки, что позволяет пользователю видеть основной контент.

Давайте скажем, вы решили загрузить ниже складки асинхронно. Ваш основной компонент может выглядеть так:

Используя динамический WebPack Импорт Функция, AsyncComponent будет загружен AJAX с сервера после нагрузки страницы. Недостаток в том, что, в то время как загрузка, пользователю, скорее всего, увидит только спиннер или пробел.

Это может быть улучшено с помощью рендеринга на стороне сервера, поскольку разметка компонентов Async будет отображаться на нагрузке на начальную страницу, которая будет намного лучше для UX, чем спиннер или пустое пространство.

Но до Vue 2.4.0 это было невозможно. Вывод SSR этого основного компонента просто выглядит так:

    
    

      Whatever sync-component renders as...
    

    
    
  

В качестве Vue 2.4.0 Async Compents будет включен в выход SSR, чтобы кодировать разделить ваши приложения Vue, пока ваше сердце не будет содержанием, без долга UX.

Одна раздражающая вещь о реквизитах заключается в том, что они могут быть переданы только от родителя к ребенку. Это означает, что если у вас глубоко вложенные компоненты, которые вы хотели пройти данные, вам необходимо связать данные как реквизиты каждому из посредников, а также:

  
    
      Finally, here's where we use {{ passdown }}!

Это не так плохо для одного или двух реквизитов, но в реальном проекте у вас может быть много, многое другое, чтобы пройти.

Вы можете обойти эту проблему, используя шину событий или Vuex, но Vue 2.4.0 предлагает другое решение. На самом деле, это часть двух отдельных, но связанных новых новых функций: во-первых, флаг для компонентов под названием наследница , во-вторых, свойство экземпляра $ attrs Отказ Давайте пройдемся через пример, чтобы увидеть, как они работают.

Пример

Скажем, мы связываем два атрибута на компоненте. Этот компонент нуждается в атрибуте пропа Ибо это собственные цели, но это не нужно Пропорция ; Это просто собирается передать это в другой вложенный компонент.

В Vue <2.4.0 любой связанный атрибут не зарегистрирован в качестве опоры, просто отображается в качестве обычного атрибута HTML. Так что, если ваше определение компонента выглядит так:

Это понравится так:

propa

Обратите внимание, как Пропорция был просто отображен как обычный HTML-атрибут. Если вы хотите этот компонент пройти Пропорция Вниз, вам придется зарегистрировать его как опоры, даже если компонент не имеет никаких прямых потребностей в этом:

export default {
  props: [ 
    'propa',
    'propb' // Only registering this to pass it down :( 
  ]
}

Это затемняет намеченную функциональность компонента и делает его трудно держать компоненты DRY. В Vue 2.4.0 мы можем добавить флаг Наследоватьтры: ложь К определению компонента и компонент будет не оказывать B как обычный атрибут HTML:

propa

Проходя вниз

Пропорция Не исчезает, хотя он все еще доступен для компонента в свойстве экземпляра $ attrs (который также был добавлен в Vue 2.4.0). В этом случае свойство экземпляра содержит какие-либо связанные атрибуты, не зарегистрированные как реквизиты:

Представьте себе, что вам нужно пропустить сотни реквизитов от родителя вниз по нескольким слоям вложенных компонентов. Эта функция позволит каждому шаблону промежуточного компонента быть объявленным гораздо более кратко в родительской области:

О, и это также работает точно так же при прохождении данных вверх путем связывания слушателей с V-на :

Примера подъема является одним из ключевых особенностей недавно выпущенного WebPack 3. Не собираясь слишком много деталей, в WebPack 1 и 2, в комплектных модулях будут обернуты в отдельные закрытия функций. Эти функции обертки медленно выполняются в браузере по сравнению с этим новым методом подъема прицела, который ставится возможным благодаря модуль модуля ES2015.

Две недели назад, Vue-loader V13.0.0 был выпущен, и он ввел изменения, где .vue Файлы будут выводиться в качестве модулей ES, позволяя им воспользоваться новыми преимуществами спектакля.

К сожалению, ES модули экспортируют по-разному, поэтому аккуратный компонентный синтаксис Async, который вы можете использовать для разделения кода в Vuue Project E.g.

const Foo = () => import('./Foo.vue');

Должен был быть изменен на это:

const Foo = () => import('./Foo.vue').then(m => m.default);

Vue 2.4.0, однако, автоматически разрешит экспорт по умолчанию ES модулей при работе с async-компонентами, что позволяет предыдущим, более обработан синтаксис.

Хорошо, эта особенность не слишком значительна, но я все еще думаю, что это круто. В Vue <2.4.0 комментарии были выделены из компонентов, когда они были оказаны:

Оказывает как:

Hello

Проблема в том, что иногда комментарии необходимы на оказанной странице. Некоторые библиотеки могут иметь необходимость в этом, например, используя комментарии как заполнителю.

В Vue 2.4.0 вы можете использовать Комментарии Флаг, чтобы указать, что вы хотите сохранить комментарии:

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше