Мы часто используем индекс в качестве ключа в цикле for или операции с картой, но его нельзя использовать в проекте vue. Почему? давайте узнаем об этом из следующей статьи.
когда мы используем ключи?
Во Vue ключ можно использовать и без него, и запустить без ошибки, но ключ рекомендуется добавлять.
Ключ — это уникальный идентификатор виртуального тега DOM в Vue. С помощью этого ключа алгоритм сравнения может быть более точным и быстрым. Если ключ не используется, поскольку обновление Vue на месте выберет узел повторного использования, предыдущее состояние будет сохранено, что может вызвать ряд ошибок.
Кроме того, уникальность ключа может быть полностью использована структурой данных карты, а временная сложность составляет всего O(1).
Что такое виртуальный DOM?
Виртуальная DOM-структура — это не что иное, как объект, описывающий характеристики каждого слоя контейнера. При выполнении bereCreated дерево DOM не создается.
Смысл существования виртуального DOM в том, чтобы уменьшить работу реальной DOM-структуры, для браузера уменьшить накладные расходы и повысить производительность.
что такое дифф?
Алгоритм сравнения — это метод оптимизации. Он сравнивает два модуля до и после, а процесс исправления (обновления) разницы называется исправлением, также называемым исправлением.
Пока источник данных изменяется, функция обратного вызова функции наблюдателя (Object.defineProperty()) будет запускаться для управления обновлением представления.
Почему я не могу использовать индекс в качестве ключа?
Основываясь на базе знаний трех вышеперечисленных, мы можем лучше понять, почему мы не можем использовать индекс в качестве ключа?
В процессе динамического удаления списка, отображаемого v-for, если ключ указан как индекс, может возникнуть проблема нарушения рендеринга. Например, если в вашем списке две строки, вы удаляете первую строку, но вторая строка исчезает.
Проблема связана с дублированием ключей. Предположим, ваш список состоит из двух строк. Когда вы удаляете первую строку, ключ во второй строке становится ключом в первой строке, и эти два ключа совпадают. Библиотеки, основанные на VirtualDOM, будут рассматривать компоненты с одним и тем же ключом как один и тот же компонент и не будут обновлять представление.
То есть, если вы удалите первую строку, ожидаемая вторая строка станет первой строкой. В результате, поскольку ключ тот же, первая строка остается неизменной, а вторая строка исчезает.
Почему я не воспроизвел эту проблему？
В большинстве случаев, даже если мы используем индекс в качестве ключа, эта проблема не будет воспроизводиться, что кажется несовместимым с нашим анализом выше. Но на самом деле в сценарии «используйте индекс как ключ, и проблем не будет», процесс на самом деле выглядит так:
- Изменяя данные для удаления первой строки, изменение данных приводит к тому, что Vue обновляет представление. В процессе обновления обнаруживается, что ключ тот же. В итоге первая строка остается неизменной, а вторая исчезает. Это первый рендер.
- VirtualDOM в первой строке не изменился, но реквизиты компонентов в первой строке изменились, с исходных реквизитов в первой строке на реквизиты во второй строке. Из-за смены реквизита компоненты в первой строке необходимо использовать новые. props обновляет представление, и в конечном итоге первая строка становится такой, как выглядит вторая строка. Это второй рендер.
На самом деле, в сценарии «используйте индекс как ключ, и проблем не будет», правильное обновление представления в конце концов достигается, потому что оно рендерится дважды.
как это будет выглядеть?
Если вы запустите рендеринг только один раз при удалении первой строки, проблема будет воспроизведена. То есть, если компоненты каждой строки не зависят ни от каких «ответных» данных, то второго рендера не будет и проблема может быть воспроизведена!
Краткое содержание
Если над данными нет операции обратного порядка, она используется только для рендеринга отображения таблицы, и обычно нет проблем с использованием индекса в качестве ключа.
Если данные добавляются в обратном порядке/удаляются в обратном порядке и выполняются другие операции, нарушающие порядок, будут сгенерированы ненужные реальные обновления DOM. Хотя с эффектом интерфейса проблем нет, если данных слишком много, эффективность будет слишком низкой;
Если структура также содержит DOM входного класса, произойдет ошибка обновления DOM, и будут проблемы с интерфейсом.
