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

79.Что такое динамические компоненты?

Динамический компонент используется для динамического переключения между несколькими компонентами с помощью элемента и передачи данных в атрибут v-bind: is.
Давайте создадим динамический компонент для переключения между разными страницами сайта,
new Vue({
el: '#app',
data: {
currentPage: 'home'
},
components: {
home: {
template: "
Home
"
},
about: {
template: "
About
"
},
contact: {
template: "

Contact

"
}
}
})

Теперь вы можете использовать динамический компонент, который содержит текущую страницу,

80. Какова цель тега keep alive?

Тег Keep-alive - это абстрактный компонент, используемый для сохранения состояния компонента или предотвращения повторного рендеринга. Когда вы оборачиваете тег вокруг динамического компонента, он кэширует экземпляры неактивных компонентов, не уничтожая их.
Давайте посмотрим на пример его использования,



Когда есть несколько условных дочерних элементов, требуется, чтобы одновременно отображался только один дочерний элемент.

Примечание. Помните, что тег keep-alive не отображает сам элемент DOM и не отображается в родительской цепочке компонента.

81. Что такое асинхронные компоненты?

В больших приложениях нам может потребоваться разделить приложение на более мелкие части и загружать компонент с сервера только тогда, когда это необходимо. Чтобы это произошло, Vue позволяет вам определить ваш компонент как фабричную функцию, которая асинхронно разрешает определение вашего компонента. Эти компоненты известны как асинхронные компоненты.
Давайте посмотрим на пример асинхронного компонента, использующего функцию разделения кода веб-пакета,
Vue.component('async-webpack-example', function (resolve, reject) {
//Webpack автоматически разбивает ваш встроенный код на пакеты, которые загружаются через запросы Ajax.
require(['./my-async-component'], resolve)
})

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