vue Flashcards
Vue. Virtual dom и механизм отрисовки. Компонентный подход
Путь рендоринга в vue :
Template => rendering function (могут изменяться в зависимости от изменения состояния components, state) => virtual dom => actual dom
В virtual dom используются следующие механизмы отрисовки:
1. Static Hoisting - если часть template не содержит никаких динамических изменений, сравнивать нужно их перерисовывать или нет не нужно. они статичны и будут возвращать одно и то же.
2. При динамическом содержимом тега или класса или id в virtual dom этому элементу будет присвоен соответствующий flag обновления и обновляется только этот например класс без перерисовки всего дерева.
Перерисовака происходит пачкой
Компонтный подход - все приложение делим на компоненты и их переиспользуем
- Vue реактивность.
- Как обновляется DOM в реактивном state . nextTick.
- отличие ref от reactive
- Это когда мы изменили данные в data и сразу видим изменения в этом объекте на странице. объект data обернут в proxy с ловушками для set, при изменении объекта происходит перерендеринг.
Если мы деструктуризируем свойство реактивного обекта переменной, то это свойство уже не будет реактивным.
2.Когда ты обновляешь реактивный state, Dom обновляется автоматически. Но изменения вносимые в реактивный state не обновляются сразу, а накапливаются и вносится через промежуток времени. чтобы внести изменения незамедлительно используют await nextTick().
3.отличие ref от reactive
1. ref можно использовать для получения состояния dom элемента.
ref это объект с полем _value.
2. reactive. с reactive мы получаем proxy без оберточного объекта.
Ограничения reactive
1. При деструктуризации свойства это свойство уже не реактивно.
2. работает только с object
SFC
single file component - модель создания компонента, содержат 3 секции -
template (разметка)
script (логика, функции b тд. должны экспортировать объект)
style
Двусторонее связывание. Способы двустороннего связывания
Это связывание графического интерфейса с данными. Например связываем value инпута с значением data email или password. Таким образом мы добиваемся синхронизации данных с визуальным отображением.
…
(1)
<input :value = “inputValue” @input=”inputValue = $event.target.value”>
(2)
<input></input>
<script>
data() {
return {
inputValue: ""
}
}
...
</script>
Сокращение и разное
props - пропсы которые прокидываются в компоненту, есть поля type и required
Короткая и полная запись
v-on:click —— @click
v-bind:posts —— :posts
Передача данных на уровень вверх.
$emit
Передача данных из ребенка в родительский компонент возможна путем создания события в ребенке. А из родительского элемента мы подписываемся на это событие.
this.$emit(‘create’, this.post) - (имя и
данные передаваемые с событием)
в родительском компоненте подписываемся на событие @create (имя такое же как и в emit)
@create = ‘createPost’
…
methods:{
// вызываем функцию которая была прописана в событии @create
createPost(post) {
}
}
Отличия с реакт
Если мы написали логику к компоненту (например @click, @input @bind и тд) то все это будет применяться в вверхнему элементу компонента
Глобальная и локальная регистрация компонента
В vue компоненты для использования нужно импортировать. Можно их импортировать глобально и локально. Для импорта глобально регистрируем компоненты с помощью app.component(
‘MyComponent’, //component-name
ComponentImport //component
)
Минусы:
- Глобальная регистрация не позволяет системам сборки удалять неиспользуемые компоненты (т. н. «tree-shaking»). Если вы глобально регистрируете компонент, но в конечном итоге не используете его нигде в своем приложении, он все равно будет включен в конечный пакет.
- глобальная регистрация затрудняет чтение и нахождение нужного компонента, который мы подключили
(можно писать в синтаксисе как <PascalCase></PascalCase> так и <kebab-case>)</kebab-case>
v-show и v-if
v-show это тот же v-if. Только v-show не убирает элемент из dom дерева, а добавляет свойство display:none
Если используем v-show, затем нельзя использовать v-else, только другой v-show
жизненный цикл компонента
Компоненты в vue имеют определенные этапы. К этим этапам мы можем подключиться и выполнить какой-либо код.
Можно выделить этап beforeCreate, created, beforeMount, mounted, beforeUpdate, update, beforeUnmount, unmount
хук представляет собой обычную функцию
Наблюдаемые свойства и вычисляемые свойства (watch(watchEffect) и computed)
Watch и computed это аналог useEffect и useMemo в react. computed запоминает результат вычисления функции, вызывается заново только когда какая-либо зависимость изменилась.
функция в наблюдателе (watch) должна иметь такое же название что и модель в data.
Watch используем если нужно выполнение side-effect или изменения стейта. Аналог useEffect.
{deep:true} запускать watcher при глубоком изменении объекта.
{immediate: true} аналог useLauoutEffect
{ once: true } - запускает watcher раз
watchEffect - автоматически запускается при изменении зависимостей
router-view, router link
router-view - component для роутинга который отрисовывает routes в src/router/router.js
router-link - Это как <link></link>, позволяет динамически обновлять страницу, без ее перезагрузки (как тег <a></a>)
1 директивы.
2 Модификаторы директив
3 пользовательские директивы.
4 Аргументы в пользовалельской директиве
1————–
Это специальные атрибуты html тегами которые мы можем использовать. позволяет добавить дополнительную функциональность и сократить кол-ва кода
v-bind:href=’url’
Также можно делать директивы с динамическими аргументами:
:[attributeName]=”url”
Динамическими аргументы не нужно писать с большой буквы, тк они будут преобразованы в аргументы с маленькой буквой
<a :[someAttr]=”value”> … </a>
будет преобразованно в :[someattr]
2————–
Модификаторы это дополнение для директивы которое может добавить дополнительное поведение для этой директивы.
Самые популярные это .stop (stop propogation) и .prevent (preventDefault)
@click.stop =
v-model.trim-пробелы в начале и в конце строки удаляются
v-model.lazy - выполняет код после onChange. по дефолту onInput
v-model.number - значение приобразовываеся в число
3———————————–
Пользовательские директивы применяют когда нам нужна логика для манипуляции с DOM этого элемента.
Дополнительный функционал вносится на разных этапах жизненного цикла компоненты.
Пользовательские директивы можно объявить как локалььно так и глобально. В Component api если директива начинается с v это будет воспринято как пользовательская директива
const vHighlight = {
mounted: (el) => {
el.classList.add('is-highlight')
}
}
<template>
<p>This sentence is important!</p>
</template>
Глобальное объявление
app.directive(‘highlight’, {
/* … */
})
4———————————
const vCustomDirective = {
created(el, binding, vnode, prevNote) {}}
el - элемент dom
binding - объект который содержит
value, oldValue, arg, modifiers
миксины в vue
это переиспользуемые
{
data: ‘ ‘,
methods: ‘ ‘,
computed: ‘ ‘,
watch: ‘ ‘,
}.
при добавление миксины в компонент происходит слияние миксина с компонентом.
сторонние модули vue
