Что такое VueJS? Каковы основные особенности VueJS? 6

70. Объясните структуру createElement с аргументами?

CreateElement принимает несколько аргументов для использования всех возможностей шаблона.
Давайте посмотрим на базовую структуру createElement с возможными аргументами,
// @returns {VNode}
createElement(
//Имя тега HTML, параметры компонента или асинхронная функция, разрешающая одно из них.
// Тип - {Строка | Объект | Функция}
// Необходимые.
'div',

//Объект данных, соответствующий атрибутам, которые вы бы использовали в шаблоне.

// Тип - {Oбъект}
// Необязательный.

{
//Обычные атрибуты HTML

attrs: {
id: 'someId'
},
//Компонентные опоры
props: {
myProp: 'somePropValue'
},
//Свойства DOM
domProps: {
innerHTML: 'This is some text'
},
//Обработчики событий вложены в `on`
on: {
click: this.clickHandler
},
//Подобно `v-bind: style`, принимает либо строку, либо объект, либо массив объектов.
style: {
color: 'red',
fontSize: '14px'
},
// Подобно `v-bind: class`, принимает либо строку, объект, либо массив строк и объектов.
class: {
classsName1: true,
classsName2: false
}
// ....
},

//Дочерние VNodes, созданные с помощью createElement () или строк для получения textVNodes.

// Тип - {строка | Массив}
// Необязательный.

[
'Learn about createElement arguments.',

createElement('h1', 'Headline as a child virtual node'),
createElement(MyComponent, {
props: {
someProp: 'This is a prop value'
}
})
]
)
См. Подробную информацию об объекте даты в официальном документе.

71. Как можно записать в компонент повторяющиеся виртуальные узлы?

Все виртуальные узлы (VNodes) в дереве компонентов должны быть уникальными. Т. Е. Вы не можете записывать повторяющиеся узлы прямым способом. Если вы хотите дублировать один и тот же элемент / компонент много раз, вам следует использовать фабричную функцию.
Приведенная ниже функция рендеринга недействительна, если вы пытаетесь дублировать элемент h1 3 раза,
render: function (createElement) {
var myHeadingVNode = createElement('h1', 'This is a Virtual Node')
return createElement('div', [
myHeadingVNode, myHeadingVNode, myHeadingVNode
])
}
вы можете делать дубликаты с заводской функцией,

render: function (createElement) {

return createElement('div',
Array.apply(null, { length: 3 }).map(function () {
return createElement('h1', 'This is a Virtual Node')
})
)
}