основное введение
В vue мы отображаем список массивов с помощью инструкции v-for, и элемент списка требует от нас определения псевдонима, а именно:
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
В приведенном выше примереitemsэто список массивов, которые мы хотим отобразить,itemявляется псевдонимом для элемента списка массива, конечно, мы можем датьv-forДобавьте второй параметр в качестве индекса текущего элемента:
<ul id="example-2">
<li v-for="(item, index) in items">
{{ index }} - {{ item.message }}
</li>
</ul>
Опытные студенты могут указать, что в приведенных выше примерах отсутствует атрибут:key, да, официальная документация предполагает, что мы даемv-forКаждый отображаемый элемент списка указываетkey,Так,keyКакова роль?vue официальная документацияДается следующее объяснение:
Когда Vue.js использует v-for для обновления отображаемого списка элементов, по умолчанию используется стратегия «повторное использование на месте». Если порядок элементов данных изменен, Vue не будет перемещать элементы DOM в соответствии с порядком элементов данных, а просто будет повторно использовать каждый элемент здесь и убедиться, что он показывает каждый элемент, который был отрисован по определенному индексу. Это похоже на track-by="$index" Vue 1.x.
Этот режим по умолчанию эффективен, но работает только для выходных данных рендеринга списка, которые не зависят от состояния дочернего компонента или временного состояния DOM (например, входные значения формы).
Чтобы дать Vue подсказку, чтобы он мог отслеживать идентификатор каждого узла и, таким образом, повторно использовать и переупорядочивать существующие элементы, вам необходимо предоставить каждому элементу уникальное ключевое свойство. Идеальным значением ключа является уникальный идентификатор, который есть у каждого элемента. Это специальное свойство эквивалентно track-by в Vue 1.x, но оно работает как свойство, поэтому вам нужно использовать v-bind для привязки динамических значений (сокращенно здесь):
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
Рекомендуется предоставлять ключ при использовании v-for, когда это возможно, за исключением случаев, когда обход выходного содержимого DOM является тривиальным или преднамеренно полагаться на поведение по умолчанию для повышения производительности. Поскольку это общий механизм Vue для идентификации узлов, ключи не связаны конкретно с v-for, у ключей есть и другие применения, которые мы увидим в следующих руководствах.
отправить вопросы
Вопрос 1: Что такое «мультиплексирование на месте»?
Здесь я привожу простой пример для иллюстрации:
В мастерской по сборке игрушек Маленькая А, Маленькая Б, Маленькая С, Маленькая Д и 96 других рабочих сборочной линии вместе завершили работу по сборке игрушек. У каждого собиралась своя игрушка. Внезапно Маленькая Б убежала с болью в животе. пошел в туалет, но работа Сяо Б не была завершена. Чтобы не влиять на общий прогресс, все рабочие по очереди примиряются, Сяо С заменяет работу Сяо Б, Сяо Д заменяет работу Сяо С и так далее. Было немного хлопотно, но, к счастью, работа была сделана вовремя.
Это общая идея мультиплексирования на месте.Если мультиплексирование на месте не будет принято, то при отсутствии Сяо Б рабочие на конвейере (включая тех, кто был до Сяо Б) будут переупорядочены, и 100 человек будут могут быть переупорядочены в соответствии с их рабочими номерами.Повторное приобретение собственного рабочего контента значительно снизит эффективность работы.
В DOM повторное использование на месте предназначено для тех элементов, которые не изменяются, например:
<div v-for="item in items">
<input/>
{{item.message}}
</div>
В этом коде неизменяемый элементinput, когда мы удаляем элемент из items,item.messageизменится, поэтому данные рендеринга изменились, но данные уже существуют в dominputТем не менее, он будет повторно использоваться на месте.Конкретный демонстрационный эффект выглядит следующим образом:
Вопрос 2: Как решить проблему повторного использования на месте?
Как мы видели выше, мы хотимinputтакже перерисовывается, решение этой проблемы vue было четко указано в документации, нам нужно добавить уникальный к каждому элементу спискаkeyАтрибуты
Вопрос 3: Как ключевой атрибут решает проблему и каков его принцип?
Эта проблема связана с алгоритмом сравнения виртуального DOM, конкретный принцип можно просмотретьСтатья о Чжиху
Вопрос 4: Какие питы появятся, если ключевой атрибут не добавлен или ключевой атрибут не уникален?
Ключевой атрибут должен быть связан с уникальным значением, но в нашем реальном проекте может не быть такого уникального значения для привязки, поэтому мы будем использоватьindexтак какkeyСтоимость собственности, это склонно к проблемам...
Потому что значение, соответствующее значению индекса, изменится, например:
list: [
{index: 0, value: 0},
{index: 1, value: 1},
{index: 2, value: 2}
]
когда мы выполняемlist.splice(1, 1)Когда элемент с индексом = 1 удаляется, массив списка становится:
list: [
{index: 0, value: 0},
{index: 1, value: 2}
]
потому чтоindexэто индекс элемента массива.Когда элемент удаляется, индекс элемента после удаленного элемента будет обновлен, то естьindexНе единственный, поэтому vue будет использоватьПовторное использование на местепринцип, то если страница имеет что-то вродеinputТакой вид следованияvalueКогда значения элементов не связаны отношениями привязки, эти элементы будут использоваться повторно, и желаемый эффект может быть не получен.
Резюме: я считаю, что люди, использующие Vue, столкнутся с такой запутанной проблемой рендеринга элементов списка.keyАтрибуты могут показаться простыми, но вы будете озадачены, когда столкнетесь с ними в первый раз.Общими ямами для рендеринга списка являются мониторинг и обновление массивов и объектов.this.$setВы это заслужили, вы можете проверить деталиофициальная документацияЕсли есть ошибка, в этой статье можно указать ~