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

В опросы на интервью VueJS 3
Подписывайся на мои соц сети
Telegram: ​https://t.me/ra1sbuva
Instagram: ​https://www.instagram.com/sanjar_8855
Youtube: https://www.youtube.com/channel/UCokweQtRgwLPrXJD91UrJMw

1. Что такое VueJS?

Vue.js - это прогрессивный фреймворк Javascript с открытым исходным кодом для создания пользовательских интерфейсов, нацеленный на постепенное внедрение. Основная библиотека VueJS ориентирована только на уровень представления, и ее легко внедрить и интегрировать с другими библиотеками или существующими проектами.

2. Каковы основные особенности VueJS?

Ниже приведены некоторые из основных функций, доступных с VueJS.
I. Виртуальный DOM: он использует виртуальный DOM, аналогичный другим существующим фреймворкам, таким как ReactJS, Ember и т.д. Virtual DOM - это облегченное древовидное представление исходной HTML DOM в памяти, обновленный не влияющий на исходный DOM.
II. Компоненты: используются для создания многоразовых пользовательских элементов в приложениях VueJS.
III. Шаблоны: VueJS предоставляет шаблоны на основе HTML, которые связывают DOM с данными экземпляра Vue.
IV. Маршрутизация: переход между страницами осуществляется через vue-router.
V. Легкость: VueJS - это легкая библиотека по сравнению с другими фреймворками.

3. Какие методы жизненного цикла VueJS?

Хуки жизненного цикла позволяют узнать, как библиотека, которую вы используете, работает за кулисами. Используя их, вы будете знать, когда ваш компонент будет создан, добавлен в DOM, обновлен или уничтожен. Давайте посмотрим на диаграмму жизненного цикла, прежде чем подробно рассматривать каждый хук жизненного цикла.

I. Создание (инициализация): хуки создания позволяют выполнять действия еще до того, как ваш компонент будет добавлен в DOM. Вам нужно использовать эти хуки, если вам нужно настроить что-то в своем компоненте как во время клиентского, так и серверного рендеринга. В отличие от других хуков, хуки создания также запускаются во время рендеринга на стороне сервера.
a. beforeCreate: этот хук запускается при самой инициализации вашего компонента. Он наблюдает за данными и событиями инициализации. Здесь данные по-прежнему не реагируют, а события, происходящие в течение жизненного цикла компонента, еще не настроены.
new Vue({
data: {
count: 10
},
beforeCreate: function () {
console.log('В этот момент ничего не вызывается')
// `this` указывает на экземпляр модели представления
console.log('count is ' + this.count);
}
})
// count is undefined

b. created: этот хук вызывается, когда Vue настроил события и наблюдение за данными. Здесь события активны, и доступ к реактивным данным разрешен, хотя шаблоны еще не смонтированы или отрисованы.

new Vue({
data: {
count: 10
},
created: function () {
// `this` указывает на экземпляр модели представления
console.log('count is: ' + this.count)
}
})
// count is: 10

Примечание: помните, что у вас не будет доступа к DOM или к цели (таргету) монтирующего элемента (this.$el) внутри хуков создания.

II. Монтаж (вставка DOM). Монтажные хуки часто являются наиболее используемыми, и они позволяют вам получить доступ к вашему компоненту непосредственно до и после первого рендеринга.
a. beforeMount: beforeMount позволяет вам получить доступ к вашему компоненту непосредственно до и после первого рендеринга.
new Vue({
beforeMount: function () {
// `this` указывает на экземпляр модели представления
console.log(`this.$el is yet to be created`);
}
})
b. mount: это наиболее часто используемый хук, и у вас будет полный доступ к реактивному компоненту, шаблонам и визуализированной DOM (через. this. $ el). Наиболее часто используемые шаблоны - это выборка данных для вашего компонента.

I’m text inside the component.

new Vue({
el: ‘#app’,
mounted: function() {
console.log(this.$el.textContent); //текст внутри компонента.
}
})

III. Обновление (Diff & Re-render): хуки обновления вызываются всякий раз, когда изменяется реактивное свойство, используемое вашим компонентом, или что-то еще вызывает его повторный рендеринг.

a. beforeUpdate: хук beforeUpdate запускается после изменения данных в вашем компоненте и начинается цикл обновления, прямо перед тем, как DOM исправляет и повторно отображает.

{{counter}}

...// остальная часть кода
new Vue({
el: '#app',
data() {
return {
counter: 0
}
},
created: function() {
setInterval(() => {
this.counter++
}, 1000)
},

beforeUpdate: function() {

console.log(this.counter) //Регистрирует значение счетчика каждую секунду перед обновлением DOM.
}
})
b. обновлено: этот хук запускается после изменения данных в вашем компоненте и повторного рендеринга DOM.

ref="dom">{{counter}}

...//
new Vue({
el: '#app',
data() {
return {
counter: 0
}
},
created: function() {
setInterval(() => {
this.counter++
}, 1000)
},
updated: function() {
console.log(+this.$refs['dom'].textContent === this.counter) // Логи будут возвращать true каждую секунду
}
})

IV. Разрушение (Teardown): перехватчики уничтожения позволяют выполнять действия, когда ваш компонент уничтожен, например очистку или отправку аналитики.

a. beforeDestroy: beforeDestroy запускается прямо перед разборкой. Если вам нужно очистить события или реактивные подписки, то, вероятно, самое время сделать beforeDestroy. Ваш компонент останется полностью функциональным.
new Vue ({
data() {
return {
message: 'Welcome VueJS developers'
}
},

beforeDestroy: function() {

this.message = null
delete this.message
}
})
b. destroy: эти перехватчики вызываются после того, как ваш компонент был уничтожен, его директивы были освобождены, а его прослушиватели событий были удалены.
new Vue ({
destroyed: function() {
console.log(this) // ‘this’ нечего не покажет
}
})