Vue.js

# Изменена обработка пользовательских элементов
breaking

# Обзор

  • КАРДИНАЛЬНОЕ ИЗМЕНЕНИЕ: Добавление пользовательских элементов в белый список теперь происходит на этапе компиляции шаблона, поэтому теперь настраиваются в опциях компилятора, а не в конфигурации выполнения.
  • КАРДИНАЛЬНОЕ ИЗМЕНЕНИЕ: Использование специального атрибута is теперь допускается только на теге <component>.
  • НОВОЕ: Добавлена новая директива v-is для поддержки случаев, когда в версиях 2.x is использовался на нативных элементах для обхода ограничений парсинга HTML.

# Автономные пользовательские элементы

Если требуется использовать пользовательский элемент, определённый вне Vue (например, используя Web Components API), необходимо «проинструктировать» Vue обрабатывать его как пользовательский элемент. Рассмотрим следующий шаблон в качестве примера.

<plastic-button></plastic-button>
1

# Синтаксис в 2.x

Во Vue 2.x, добавить пользовательский элемент в белый список происходило с помощью опции Vue.config.ignoredElements:

// В этом случае Vue игнорирует пользовательский элемент, определённый вне Vue
// (например, при использовании Web Components API)

Vue.config.ignoredElements = ['plastic-button']
1
2
3
4

# Синтаксис в 3.x

Во Vue 3.0 эта проверка выполняется на этапе компиляции шаблона. Чтобы компилятор обрабатывал <plastic-button> как пользовательский элемент:

  • При наличии шага сборки необходимо передать опцию isCustomElement в компилятор шаблонов Vue. При использовании vue-loader нужно передавать через его опцию compilerOptions:

    // в конфигурации webpack
rules: [
  {
    test: /\.vue$/,
    use: 'vue-loader',
    options: {
      compilerOptions: {
        isCustomElement: tag => tag === 'plastic-button'
      }
    }
  }
  // ...
]
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

  • При компиляции шаблонов на лету нужно передавать через app.config.isCustomElement:

    const app = Vue.createApp({})
app.config.isCustomElement = tag => tag === 'plastic-button'
    1
    2

    Важно отметить, что runtime-конфигурация повлияет только на компиляцию шаблонов на лету — она не затрагивает предварительно скомпилированные шаблоны.

# Модифицированные встроенные элементы

Спецификация пользовательских элементов позволяет использовать их как модифицированные встроенные элементы (opens new window) добавив атрибут is на встроенный элемент:

<button is="plastic-button">Нажми меня!</button>
1

Vue использовал специальный атрибут is для симуляции поведения родного атрибута до того, как он станет доступен в браузерах. Однако, в версиях 2.x он интерпретируется как отрисовываемый компонент Vue с именем plastic-button. Это блокирует использование нативного варианта модифицированных встроенных элементов, упомянутого выше.

С версии 3.0 специальная обработка атрибута is ограничена только тегом <component>.

  • При использовании на зарезервированном теге <component>, поведение будет как в 2.x;

  • При использовании на обычном компоненте будет считаться входным параметром:

    <foo is="bar" />
    1
    • Поведение в 2.x: будет отрисован компонент bar.
    • Поведение в 3.x: будет отрисован компонент foo и передан входной параметр is.

  • При использовании на обычных элементах, будет передаваться в вызов createElement в качестве опции is, а также отрисован как нативный атрибут. Это добавляет поддержку использования модифицированных встроенных элементов.

    <button is="plastic-button">Нажми меня!</button>
    1

    • Поведение в 2.x: будет отрисован компонент plastic-button.

    • Поведение в 3.x: будет отрисована нативная кнопка с помощью вызова

      document.createElement('button', { is: 'plastic-button' })
      1

# Обход ограничений парсинга шаблонов в DOM с помощью v-is

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

При использовании шаблонов в DOM, они будут подчиняться нативным правилам парсинга HTML. Некоторые HTML-элементы, такие как <ul>, <ol>, <table> и <select>, имеют ограничения на то, какие элементы могут быть внутри них, а некоторые элементы, такие как <li>, <tr> и <option> могут быть указаны только внутри определённых элементов.

# Синтаксис в 2.x

Во Vue 2 для обхода этих ограничений рекомендовалось использовать атрибут is на нативном теге:

<table>
  <tr is="blog-post-row"></tr>
</table>
1
2
3

# Синтаксис в 3.x

С изменением поведения is была добавлена новая директива v-is для таких случаев:

<table>
  <tr v-is="'blog-post-row'"></tr>
</table>
1
2
3

ВНИМАНИЕ

Директива v-is работает как динамическая привязка в 2.x :is — поэтому для отрисовки компонента по его зарегистрированному имени значение должно быть строковым литералом JavaScript:

<!-- НЕПРАВИЛЬНО, ничего не будет отрисовано -->
<tr v-is="blog-post-row"></tr>

<!-- Правильно -->
<tr v-is="'blog-post-row'"></tr>
1
2
3
4
5

# Стратегия миграции

  • Заменить config.ignoredElements на compilerOptions для vue-loader (при наличии шага сборки) или на app.config.isCustomElement (при компиляции шаблонов на лету)

  • Изменить все не-<component> теги с использованием is на <component is="..."> (для шаблонов в однофайловых компонентах) или на v-is (для шаблонов в DOM).

Deployed on Netlify.
Последнее обновление: 2021-01-07, 09:28:57 UTC

← Опцию data необходимо указывать только функцией →