Abr@X@bra.ru
Что означает «h» в методе визуализации Vue?
Что означает «h» в методе визуализации Vue?

Что означает «h» в методе визуализации Vue?

23.09.2018
68

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

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

Возможно, вам интересно, что это делает? Что это означает? H обозначает hyperscript. Это рифф HTML, что означает язык гипертекстовой разметки: поскольку мы имеем дело со сценарием, для использования этой подстановки стало возможным использование в виртуальных реализациях DOM.

Hyperscript – скрипт, который генерирует HTML-структуру

Это сокращается до h. Действительно, вы можете думать об этом как о сокращении для createElement.

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

А вот как будет выглядеть код если заменить на h

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

Код можно сократить еще) В этом нам поможет синтаксис ES6:

render: h => h (App)

Vue принимает до трех аргументов:

render(h) {
  return h('div', {}, [...])
}

  1. Первый - это тип элемента (здесь показан как div).
  2. Второй объект данных. Мы размещаем здесь несколько полей, в том числе: props, attrs, dom props, class и style.
  3. Третий - это массив дочерних элементов. Затем у нас будут вложенные вызовы и, в конечном итоге, вернем дерево виртуальных элементов DOM.

Программирование на основе фреймворка Vue.js. Если Вам или Вашей компании необходим проект на Vue.js, пишите мне, если у меня есть свободное время для нового проект, я обязательно помогу Вам с реализацией данной задачи.
Email - [email protected]
Telegram - @abraxabr 





Vue.js
Читайте также:
Улучшенные эффекты с режимом смешивания фоновых слоев в CSS

Улучшенные эффекты с режимом смешивания фоновых слоев в CSS

Если одна картина заслуживает тысячи слов, то смешение двух картин заслуживает гораздо большего. Точно так же, возможности...
Читать
Часть 1. Делаем сетку на CSS Grid

Часть 1. Делаем сетку на CSS Grid

CSS Grid Layout полностью меняет игру для веб-дизайна. Это позволяет нам создавать сложные макеты с помощью CSS. Давайте...
Читать
Часть 1: Создание пользовательских компонентов с помощью Vue.js

Часть 1: Создание пользовательских компонентов с помощью Vue.js

Добро пожаловать в серию постов по созданию пользовательских компонентов в Vue.js 2.0.
Читать