Skip to content

Latest commit

 

History

History

sarah-drasner-render-function-h

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
images
images
 
 
readme.md
readme.md
 
 

readme.md

Функция render() - что такое аргумент h

logo

Перевод статьи Sarah Drasner: What does the ‘h’ stand for in Vue’s render method?. Опубликовано с разрешения автора.

Если вы когда-либо работали с фреймворком Vue.js, то вам приходилось сталкиваться в файле main.js с подобным способом рендеринга приложения:

new Vue({
 render: h => h(App)
}).$mount('#app')

В последней версии консольной утилиты vue-cli такой способ является способом по умолчанию.

Другим возможным случаем, когда вам приходилось сталкиваться с функцией рендеринга render(), является использование синтаксического расширения JSX в локальном компоненте Vue-приложения:

Vue.component('jsx-example', {
  render (h) {
    return <div id="foo">bar</div>
  }
})

В обоих случаях у вас мог возникнуть вопрос - что такое h и для чего оно предназначено?

Если кратко - h является сокращением от hyperscript. Это название является (в свою очередь) сокращением для Hypertext Markup Language. Такое имя используется потому, что при работе с Vue-приложением мы фактически имеем дело со скриптом, результатом работы которого является виртуальное DOM-дерево. Использование подобного сокращения также встречается в официальной документации других JavaScript-фреймворков. Например, в документации Cycle.js есть определение h - The hyperscript function h().

Из официальной документации Vue.js:

Сокращение createElement до h — распространённое соглашение в экосистеме Vue и обязательное для использования JSX. В случае отсутствия h в области видимости, приложение выбросит ошибку.

В одном из ишью создатель фреймворка Vue.js Эван Ю (Evan You) так объясняет, что такое h:

Термин hyperscript можно объяснить так - это "скрипт, который генерирует HTML-структуру"

Сокращение h используется при написании кода - так быстрее и легче. Более подробно это сокращение также объясняется Эваном в Advanced Vue Workshop - курсов для фронтенд-разработчиков Frontend Masters.

Про сокращение h можно думать как о более краткой форме функции createElement. Например, полная форма функции createElement представлена ниже:

render: function (createElement) {
  return createElement(App);
}

Если заменить createElement на h, то получим более сокращенный вариант этой функции:

render: function (h) {
  return h(App);
}

... который можно сократить еще больше при помощи возможностей ES6:

render: h => h (App)

Vue-версия функции render() принимает три аргумента:

render(h) {
  return h('div', {}, [...])
}
  • первый аргумент - это тип элемента (в примере представлен div);
  • второй аргумент - это объект данных (здесь можно передать свойства, атрибуты, классы или стили);
  • третий аргумент - это массив дочерних Node-узлов; здесь можно размещать вложенные вызовы функции createElement и вернуть обратно дерево виртуальных DOM-узлов;

Термин hyperscript может вводить в заблуждение в некоторых случаях, так как это имя JavaScript-библиотеки hyperscript, у которой есть одноименная экосистема. В нашем конкретном случае речь не идет об этих сущностях.

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