Обзор Vue.js 2.627.01.2019 17:49

Привет, Хабр!

Совсем скоро должна выйти новая версия Vue.js — 2.6. Под катом вы найдете обзор новых фич следующей версии, включая новый синтаксис слотов, Vue.observable () и много чего еще!

1. Новый синтаксис для scoped slots

Это одно из самых значимых изменений. Оно включает в себя:

• Новую директиву v-slot, объединяющую slot и slot-scope
• Сокращение для использования именованных scoped slots

Проще всего это понять на примере:

Как использовались scoped slots в версии Vue@2.5.22:

Как можно теперь:

Для дефолтного слота можно применить специальный синтаксис, если не используются именованные слоты:

И вот сокращение для именованных слотов:

Новую директиву можно использовать и без каких-либо scope-переменных, но тогда слот все-равно попадет в $scopedSlots родителя.

Ссылки:

1. Новый синтаксис v-slot
   
2. Сокращение для v-slot
   

2. Динамический аргумент директивы

Если вы хотите динамический аргумент для v-bind или v-on, то во Vue@2.5.22 у вас есть только один вариант:

Но у него есть пара недостатков:

• Не все знают о возможности использования v-bind/v-on на объектах и о динамических названиях переменных
• vue-template-compier генерирует неэффективный код
• v-slot не имеет похожего синтаксиса для объектов

Чтобы избавиться от них, Vue@2.6.0 представляет новый синтаксис:

Примеры использования:

Ссылки:

3. Создание реактивных объектов с помощью Vue.observable ()

Раньше, чтобы создать реактивный объект, нужно было засунуть его внутрь инстанса vue-компонента. Теперь у нас есть отдельный метод, который делает объект реактивным — Vue.observable ().

Реактивный объект можно спокойно использовать в render- и computed-функциях.

Пример использования:

import Vue from vue;

const state = Vue.observable({
  counter: 0,
});

export default {
  render() {
    return (
      

        {state.counter}

         { state.counter++; }}>
          Increment counter
        
      
    );
  },
};

4. Загрузка данных на сервере

В новом обновлении vue-server-renderer изменил стратегию загрузки данных для SSR.

Раньше нам советовали вызывать методы asyncData () у компонентов, полученных через router.getMatchedComponents ().

В новой версии появился специальный метод у компонентов — serverPrefetch (). vue-server-renderer вызовет его у каждого компонента и дождется решения возвращенных промисов:

Чтобы узнать, когда завершилось ожидание всех serverPrefetch () и приложение завершило свой рендеринг, в контексте функции серверного рендера появилась возможность добавить хук rendered ():

/* Упрощенный entry-server.js */

import { createApp } from './app';

export default context => new Promise((resolve, reject) => {
  const { app, router, store } = createApp();
  const { url } = context;

  router.push(url);

  router.onReady(() => {
    context.rendered = () => {
      // Передаем состояние хранилища после завершения всех serverPrefetch()
      context.state = store.state;
    };

    resolve(app);
  }, reject);
});

5. Улучшенный вывод ошибок компилятора

При компиляции html в render-функцию vue-template-compiler может выдать ошибки. Раньше Vue выводил описание ошибки без ее местоположения, теперь новая версия будет показывать, где она находится.

Пример:

Ошибка vue-template-compiler@2.5.22:

  Error compiling template:

  

    
  

  -