Почему вы должны избегать шаблонов Vue.js dom

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

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

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

В этой статье я объясню проблемы с использованием DOM как шаблона и предложить некоторые альтернативы.

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

Дом как шаблон

Эль Опция используется для монтажа экземпляра VUE к элементу в DOM. Если нет Шаблон или оказывать Вариант присутствует, Vue будет использовать любой существующий контент в монтажном элементе в качестве шаблона.




  
    
    title
  
  
    
      
      My Vue.js App
      {{ message }}

new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  }
});

Этот подход быстро поднимает вас и работает, но вы должны перейти от него, потому что:

Разметки вы пишете не всегда то, что вы получаете
Синтаксические столкновения с шаблонными двигателями
Несовместимость с рендерингом на стороне сервера
Требуется компиляция шаблона выполнения

Разметка

Давайте сделаем различие между Марка и Дом Отказ Markup – это HTML, который вы пишете. Браузер тогда проанализирует это и включает его в DOM.

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

Например, у вас может быть пользовательский компонент мой ряд что делает как TR И будет логически использоваться так:

Так как только TR разрешено внутри Таблица браузер будет поднимать мой ряд Элемент над таблицей во время его анализа документа. К тому времени Vue Runs вы будете иметь это:

Существуют также крутые нестандартные функции для шаблонов Vue, которые DOM Parser откроется:

Самозаменяющиеся теги: Если ваш компонент не нужен слот, VUE позволяет сделать его самозакрывающимся элементом.

Компоненты Non-Kebab-Cound: HTML является нечувствительным к регистру, что означает, что вы ограничены компонентами Cebab-Case в шаблоне. Vue будет счастливо принять камеру или Pascalcase, хотя. То же самое с реквизитом.

Ни один из этих проблем не происходит, если вы используете строковые шаблоны (или функции рендеринга), поскольку парсер DOM не является фактором.

Столкновение с шаблонными двигателями

Если вы используете Vue.js в сочетании с шаблонным двигателем, любой общий синтаксис может быть проблематичным.

Например, руль и лезвие Laravel используют двойные фигурные брекеты {{}} Синтаксис, который Vue использует. Когда ваш шаблон обрабатывается, шаблонный мотор не сможет отличить синтаксис Vue, который приведет к проблеме.

Обычно это легко обойти, избегая синтаксиса Vue E.G. в лезвие вы можете поставить @ Перед вашими скобами и лезвием узнают, что они игнорируют их, например, @ {{forvue}} Отказ Но все же, это дополнительная вещь, чтобы раздражать тебя.

Серверный рендеринг

Вы совсем просто не можете использовать шаблон DOM, если вы хотите, чтобы Server-Side представляют свое VUE-приложение, так как документ HTML не является входом процесса SSR.

Избегая шаблонов DOM

Как вы можете архитектор приложение Vue.js без шаблона DOM или хотя бы маленького?

1. Абстрактная разметка к компонентам

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

Одно файловые компоненты являются превосходным выбором. Если вы не можете включить шаг сборки в вашем проекте и не любите писать шаблоны как строки JavaScript (кто делает), вы можете попробовать X-шаблоны Отказ

X-шаблоны

С X-шаблонами ваш шаблон по-прежнему определен на странице, но в теге скрипта и, следовательно, не будет, чтобы избежать обработки синчарной частотой. Тег скрипта помечен Текст/X-шаблон и указано ID в определении вашего компонента.

Vue.component('my-component', {
  template: '#my-component'
}

2. Установите на пустой узел с помощью функции рендеринга

Абстрационная разметка в компоненты попадает в стену, когда вы понимаете, что вам все еще нужно объявить свой компонент корневого уровня в шаблоне DOM.

Если вы хотите полностью устранить свой шаблон DOM, вы можете установить компонент (ы) корневого уровня с помощью функции Render.

Допустим, у вас есть один всеобъемлющий компонент, который объявляет другие компоненты, называемые Приложение Отказ Приложение можно объявить с оказывать Функция и установлена на пустой узел, поскольку функции рендеринга будут заменить их элемент горы.

new Vue({
  el: '#app',
  components: {
    App
  },
  render: function(createElement) {
    return createElement(App);
  }
})

И с этим ваше приложение свободно от одного шаблона DOM!

Если вы можете устранить все шаблоны String и DOM из вашего приложения, вы можете использовать более меньшую строку Vue, только для времени выполнения. Это идеальная архитектура проекта и то, что вы увидите, используемые в шаблонах Vue-Cli.

Резюме

Шаблоны DOM проблематичны, поскольку парсер DOM может связываться с вашей разметкой. Также есть вероятность столкновений с шаблонными двигателями и несовместимостью с рендерингом сервера.
Чтобы минимизировать свой шаблон DOM, абстрактный разметку на компоненты.
Чтобы полностью устранить шаблон DOM, вам нужно установить свой компонент корневого уровня с помощью функции рендера.

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

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

Учить больше