Всем доброго вечера. Помогите с нубским вопросом. При отрисовке списков

Question

Всем доброго вечера. Помогите с нубским вопросом. При отрисовке списков

при помощи директивы v-for, на что именно влияет key? По React помню, что не указывать key плохая идея, а указывать в качестве ключа индекс элемента - еще хуже. Key используется для уникального определения элементов в списке, на сколько я знаю. Знает кто, как поведет себя Vue, если в списке будут два элемента с одинаковым key или же key вообще опустить?

#programming #russian #vue.js

0

09.08.2021

6 ответов

9 просмотров

Андрей Автор вопроса

Документацию, разумеется, прочитал. Только там довольно поверхностно, как по мне. Интересует несколько более практическое и глубокое понимание. А именно: Если ключ отсутствует на списке, то Vue будет заново рендерить весь список при изменении любого элемента? Либо же будет пытаться сравнить элементы с виртуальным DOM? И если ключи совпадают, то Vue пропустит элемент и оставит в нем предыдущее состояние?

0

09.08.2021

Александр Епихин

Если вы хотите разобраться то предлагаю вам создать отдельный компонент, который на вход будет принимать свой порядковый номер. В каждом хуке выводите в console.log(порядковый номер). В цикле выведите несколько значений из списка. В качестве key укажите порядковый номер. А в родительском элементе попробуйте поменять список. Потом оберните все в transition-group. И посмотрите как все меняется.

0

09.08.2021

Александр Епихин

https://codesandbox.io/s/brave-shape-2vn0y?file=/src/App.vue Понажимайте на кнопку. Измените значение key на что-то уникальное, например на item.msg

0

09.08.2021

Андрей Автор вопроса

Т.е. принцип тот-же, если меняется список, а в качестве ключа стоит индекс(или ключ не указан), то удаляется последний элемент, а остальные обновляются, верно?

0

09.08.2021

Andrew MOON

key позволяет vue определять, что именно нужно перерисовать. без key может быть перерисовано больше, чем нужно. еще у key много разных кейсов, которые работают не так, как нужно. например, если в key поле объекта, а объект был заменен, то все поля так же были заменены, даже если значения в ним не поменялись, а значит перерисовано будет все

0

10.08.2021

Александр Епихин · Accepted Answer

Александр Епихин

Смысл похожий. Почитайте документацию, там как нигде хорошо описано зачем это нужно https://ru.vuejs.org/v2/api/#key

0

09.08.2021

169 похожих чатов

Всем доброго вечера. Помогите с нубским вопросом. При отрисовке списков

6 ответов

Похожие вопросы