{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[{"key":0,"length":29,"offset":20}],"inlineStyleRanges":[{"length":50,"offset":0,"style":"ITALIC"}],"text":"Кросспостинг статьи Работа с шаблонами в Vue.js 2.","type":"unstyled","key":"d8jvb"},{"data":{"image":{"id":"5af563b8a936f497ded9807b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"atomic:image","key":"30up1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue.js 2 представил свою собственную реализацию Virtual DOM. На первый взгляд, кажется что это никак не отразится на том как вы пишите шаблоны. Из документации:","type":"unstyled","key":"fkjfv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":291,"offset":0,"style":"ITALIC"}],"text":"Под капотом, Vue компилирует шаблоны в render-функции для Virtual DOM. В совокупности с системой реактивности, Vue способен грамотно определять минимальное количество компонентов для повторной визуализации и выполнять минимальное количество действий с DOM при изменении состояния приложения.","type":"blockquote","key":"9duho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Virtual DOM освобождает от довольно большой части оптимизации: теперь вы можете предварительно скомпилировать шаблоны в чистый JavaScript, таким образом Vue.js может не делать этого в браузере.","type":"unstyled","key":"aehi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Без предварительной компиляции шаблонов в процессе сборки, Vue.js будет переводить строковый шаблон в JavaScript render-функцию, во время выполнения. Это означает, что на этапе начального рендеринга потребуется больше времени, по двум причинам: ваш уже собранный скрипт должен включать в себя Vue компилятор (больше время для загрузки) и шаблон должен быть скомпилирован, перед тем как он будет использован (больше время выполнение).","type":"unstyled","key":"aricd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эта статья не о синтаксисе шаблонов в Vue.js 2, а о том где и как определять ваши шаблоны. Я написал её, потому что на текущий момент не нашёл ни одного ресурса, который бы на самом деле объединил различные способы управления вашими шаблонами.","type":"unstyled","key":"9vus6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я разделил различные способы определения шаблонов на 3 разные категории, у каждой из которых есть собственные преимущества и недостатки:","type":"unstyled","key":"em9hk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написание шаблонов, которые компилируются во время выполнения (наименьшая производительность);","type":"unordered-list-item","key":"n9ho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":25,"style":"ITALIC"}],"text":"Использование отдельного .vue файла для компонентов (требуется этап сборки);","type":"unordered-list-item","key":"e3cq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ручное написание render-функций (чистый JavaScript, не HTML-подобный синтаксис);","type":"unordered-list-item","key":"34oo2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование не скомпилированных шаблонов","type":"header-two","key":"nru7"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":33,"offset":67}],"inlineStyleRanges":[],"text":"Шаблоны в Vue.js необязательно должны быть скомпилированы. Если вы используете runtime версию Vue.js, то шаблоны могут быть скомпилированы прямо в браузере. Это решение отличается простотой. Никаких лишних этапов сборки или специальных типов файлов, но такой подход жертвует производительностью. Первый рендеринг компонента займёт больше времени, потому что шаблон сначала необходимо скомпилировать в JavaScript.","type":"unstyled","key":"7on6s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Определение шаблонов в компоненте","type":"header-three","key":"bchd1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":83,"style":"ITALIC"}],"text":"Самый простой способ определить шаблон компонента - это определить его в параметре template.","type":"unstyled","key":"21l7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// greeter.js\n\nVue.component('greeter', {\n\n template: '

Hello, {{ name }}!

',\n\n props: ['name'],\n});","type":"blockquote","key":"5muns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В JavaScript, строковый тип данных не может быть размещён на нескольких строках кода. Если вы хотите чтобы ваш выглядел свободно, можете использовать шаблонные литералы.","type":"unstyled","key":"ee6ar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// greeter.js\n\nVue.component('greeter', {\n\n template: `\n

\n Hello, {{ name }}!\n

\n `,\n\n props: ['name'],\n});","type":"blockquote","key":"8eea9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":131,"style":"ITALIC"},{"length":7,"offset":165,"style":"ITALIC"}],"text":"Кроме того, если вы используете такие сборщики как Webpack или Browserify, вы можете определить шаблон в отдельном файле. Параметр template может принимать значение require.","type":"unstyled","key":"fbkbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// greeter.js\n\nVue.component('greeter', {\n\n template: require('./greeter.html'),\n\n props: ['name'],\n});","type":"blockquote","key":"cjgm9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// greeter.html.js\n\nmodule.exports = `\n

Hello, {{ name }}!

\n`;","type":"blockquote","key":"ckcsu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Определение шаблонов в атрибуте type=\"x-template\" тега script","type":"header-three","key":"ceo4v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":4,"style":"ITALIC"},{"length":10,"offset":23,"style":"ITALIC"}],"text":"Тег script с атрибутом x-template может содержать шаблон, к которому компонент будет обращаться по ID.","type":"unstyled","key":"d43l1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// greeter.js\n\nVue.component('greeter', {\n\n template: '#greeter',\n\n props: ['name'],\n});","type":"blockquote","key":"ee94r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n","type":"blockquote","key":"4ik70"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":24,"offset":164}],"inlineStyleRanges":[{"length":10,"offset":223,"style":"ITALIC"}],"text":"На самом деле, это решение не очень, так как оно создаёт довольно большой разрыв между вашими шаблонами и компонентами, а по факту не приносит никакой пользы (даже официальная документация отговаривает нас от использования x-template).","type":"unstyled","key":"47qrj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование inline-template атрибута","type":"header-three","key":"7d991"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":32,"style":"ITALIC"}],"text":"С помощью специального атрибута inline-template, шаблон может быть указан во внутреннем содержании компонента.","type":"unstyled","key":"flp5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// index.js\n\nVue.component('greeter', {\n props: ['name'],\n});\n\nnew Vue({\n el: '#app',\n});","type":"blockquote","key":"4tgk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n

\n \n Hello, {{ name }}!\n \n

","type":"blockquote","key":"5e0v5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это может оказаться полезным, если вы хотите чтобы HTML был виден сразу после того как он пришёл с сервера. Однако, как правило использовать встроенные шаблоны не рекомендуется, потому что такой подход делает его сложнее для обдумывания масштабов вашего компонента.","type":"unstyled","key":"cenet"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":12,"offset":0}],"inlineStyleRanges":[],"text":"Документация","type":"unstyled","key":"froob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование отдельного файла компонента (.vue файлов)","type":"header-two","key":"54dkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отдельный файл компонента существовал уже в первой версии Vue.js. В Vue.js 2 он приносит больше пользы: шаблоны будут предварительно скомпилированы в чистый JavaScript.","type":"unstyled","key":"56r00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue файлы позволяют вам определять шаблон и скрипт в отдельном файле, который будет скомпилирован в JavaScript с помощью Webpack или Browserify.","type":"unstyled","key":"ftg80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n","type":"blockquote","key":"cetc9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отдельные файлы компонента также открывают дверь более интересным возможностям, таким как написание шаблонов с помощью HTML или CSS препроцессоров. Это означает, что вы можете писать шаблоны например с помощью Pug (формально Jade).","type":"unstyled","key":"8gd0a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n\n\n","type":"blockquote","key":"8sftt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":316,"style":"ITALIC"}],"text":"Обратите внимание на то, что поскольку вы используете специальный тип файла, становиться труднее добавлять другие инструменты в ваш проект. Например, если вы хотите писать тесты или анализаторы (lint'ы) для ваших компонентов, то сначала их нужно скомпилировать, а также у редакторов кода могут возникнуть проблемы с .vue файлами.","type":"unstyled","key":"edqj9"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":12,"offset":0}],"inlineStyleRanges":[],"text":"Документация","type":"unstyled","key":"1agui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование render-функций","type":"header-two","key":"es4rk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написание сырых render-функций","type":"header-three","key":"dvig2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда используются различные стратегии шаблонизации (компиляция во время выполнения или отдельные файлы компонентов), строковые шаблоны компилируются в render-функции автоматически.","type":"unstyled","key":"4mlok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написание ваших собственных render-функций даёт вам максимальную производительность без стадии сборки, но дело в том, что они не HTML-подобные и с ними труднее работать.","type":"unstyled","key":"uqfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// greeter.jsx\n\nVue.component('greeter', {\n\n render(h) {\n return h('div', `Hello, ${this.name}!`);\n },\n\n props: ['name'],\n});","type":"blockquote","key":"2f877"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":12,"offset":0}],"inlineStyleRanges":[],"text":"Документация","type":"unstyled","key":"1n948"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написание render-функций с помощью JSX","type":"header-three","key":"83lk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"render-функции могут быть написаны в JSX формате с помощью плагина Babel, что позволяет достичь более HTML-подобного синтаксиса.","type":"unstyled","key":"amb8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// greeter.jsx\n\nVue.component('greeter', {\n\n render(h) {\n return (\n

\n Hello, {{ name }}!\n

\n );\n },\n\n props: ['name'],\n});","type":"blockquote","key":"5ltpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":201,"style":"ITALIC"},{"length":2,"offset":217,"style":"ITALIC"}],"text":"Обратите внимание на то, что большинство встроенных во Vue.js 2 директив не будут доступны при использовании JSX, но обычно у них есть собственные программные эквиваленты (например, вы можете заменить v-if на обычный if из JavaScript).","type":"unstyled","key":"b59kg"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":12,"offset":0}],"inlineStyleRanges":[],"text":"Документация","type":"unstyled","key":"9uodu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вывод","type":"header-two","key":"2um9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы разрабатываете большое приложение, в котором производительность является очень важным фактором (обычно SPA) или заинтересованы в использовании препроцессоров, то кажется вам подойдут отдельные файлы для Vue компонентов.","type":"unstyled","key":"5kfg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":223,"style":"ITALIC"}],"text":"Если вы не против первоначальной потери производительности и готовы использовать компиляцию во время выполнения (случаи, которые просто улучшают страницу), я рекомендую использовать литералы JavaScript шаблонов в параметре template компонента. Это не привнесёт никаких чуждых концепций в ваш процесс сборки и сохранит ваш шаблон вместе с компонентом.","type":"unstyled","key":"84lri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"Y0wysbJOok7aRfhEIxBN"}],"entityMap":{"0":{"data":{"url":"https://tuhub.ru/posts/rabota-s-shablonami-v-vue-js-2"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build","url":"https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://vuejs.org/v2/guide/components.html#X-Templates","url":"https://vuejs.org/v2/guide/components.html#X-Templates"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://vuejs.org/v2/guide/components.html#Inline-Templates","url":"https://vuejs.org/v2/guide/components.html#Inline-Templates"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://vuejs.org/v2/guide/single-file-components.html","url":"https://vuejs.org/v2/guide/single-file-components.html"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://vuejs.org/v2/guide/render-function.html","url":"https://vuejs.org/v2/guide/render-function.html"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://vuejs.org/v2/guide/render-function.html#JSX","url":"https://vuejs.org/v2/guide/render-function.html#JSX"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}