Статью написать не просто, поставь лайк, брат

Сосредоточьтесь на совместном использовании исходного кода Vue, статья разделена на общеупотребительную и исходную версии, общеупотребительная версия помогает понять принцип работы, исходная версия помогает понять внутренние детали, давайте учиться вместе Исследование на основе версии Vue【2.5.17】

Если вы находите типографику уродливой, пожалуйста, нажмитессылка нижеили потяните внизОбратите внимание на публичный аккаунттоже хорошо

Наконец-то добрались до последней части контента! Сегодня мы вкратце подведем итоги Диффа, там вообще не так много контента, все картинки

Как важная часть Vue, Diff по-прежнему очень важен для понимания.

Эта статья будет кратко объяснена в нескольких частях, без какого-либо исходного кода, просто чтобы помочь вам сформулировать идею и понять общее содержание Diff.

1、Diff 的作用

2、Diff 的做法

3、Diff 的比较逻辑

4、简单的例子

Начнем наш текст

Эффект разницы

Появление Diff найдет наименьшую разницу DOM, чтобы уменьшить количество обновлений, и обновит только разницу DOM.

Он будет потреблять меньше

Измените данные, нет необходимости заменять другие DOM, которые не задействованы и не изменились

Диф практика

Vue будет сравнивать только слой дочерних узлов, родительский узел которых является одним и тем же узлом в старом и новом узлах.

также можно сказать, что

Только когда два старых и новых узла являются одним и тем же узлом, они будут сравнивать свои соответствующие дочерние узлы.

Самый большой корневой узел можно сравнить непосредственно в начале

Это также называется сравнением на одном уровне. Это не требует рекурсии. Хотя это, кажется, снижает возможность повторного использования, но также позволяет избежать чрезмерной оптимизации. Это очень эффективный алгоритм Diff.

Что такое старые и новые узлы

Все старые и новые узлы относятся к узлам Vnode, Vue будет сравнивать только узлы Vnode, а не DOM.

Поскольку Vnode является JS-объектом и не ограничен платформой, он используется в качестве основы для сравнения, и логику кода в дальнейшем изменять не нужно.

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

Чтобы узнать больше о Vnode, перейдите к этой статьеVNode — исходная версия

Что означает, что родительский узел является одним и тем же узлом?

Например, четыре сравнения (с первого по четвертое), показанные на рисунке ниже, имеют общий родительский узел.

Например, при сравнении синего квадрата родительский узел старого и нового дочерних узлов является одним и тем же узлом 1.

Например, при сравнении красного квадрата родительские узлы старого и нового дочерних узлов равны 2.

Так что у них есть шанс сравнить

На рисунке ниже есть только два сравнения, потому что в сравнении синего квадрата нет одного и того же узла, поэтому сравнение дочерних узлов более низкого уровня выполняться не будет.

Логика сравнения различий

Суть сравнения различий заключается в повторном использовании узлов, поэтому сравнение различий заключается в поиске одного и того же узла в старом и новом узлах.

Логика сравнения здесь основана на сравнении того же уровня, упомянутом на предыдущем шаге.

Следовательно, повторное использование узла, поиск одного и того же узла не является неограниченным рекурсивным поиском.

Например, на рисунке ниже действительно есть один и тот же узел 6 в старом дереве узлов и в новом дереве узлов, но старый узел 6 не будет использоваться повторно.

Даже на одном уровне, но родительские узлы разные, они все равно сосуществуют

Только узлы в этом случае будут повторно использоваться, один и тот же родительский узел 8

Поговорим о логике сравнения Diff

1, не могу двигаться, постарайся не двигаться

2. Нет другого выбора, кроме как переехать

3. Не работает, создавай или удаляй

Алгоритм обработки сравнения выглядит следующим образом.

в старых и новых узлах

1. Сначала найти тот самый узел, который не нужно перемещать, с минимальным потреблением

2. Найдите тот же узел, который нужно переместить, и используйте второй наименьший узел.

3. В конце концов, если вы не можете его найти, вы создадите новый и удалите узел, и разберетесь с итоговой строкой.

Сравнение заключается в изменении дерева DOM.

На самом деле здесь есть три вида деревьев: одно — дерево DOM страницы, одно — старое дерево VNode, а другое — новое дерево Vnode.

Однозначное соответствие между DOM-деревом страницы и старыми узлами дерева VNode

А новое дерево Vnode — это то, как должно выглядеть DOM-дерево страницы после обновления.

Вот процесс сравнения старого дерева Vnode с новым деревом Vnode.

Два дерева Vode не будут изменены, но реальный DOM будет изменен непосредственно с результатом сравнения.

Например, в том же слое старого дерева Vnode найдите тот же узел, что и в новом дереве Vnode, но в другом месте.

В этот момент необходимо переместить этот узел, но не узел в старом дереве Vnode.

Вместо этого переместите DOM напрямую

Как правило, старое и новое деревья Vnode используются для сравнения, а дерево DOM страницы используется для изменения в соответствии с результатами сравнения.

Если вы немного запутались, давайте просто приведем пример

Простой пример разницы

Например, на рисунке ниже есть два старых и новых дерева узлов, которые необходимо сравнить, и дерево DOM страницы, которое необходимо изменить.

Начинается первый раунд сравнений

Поскольку все родительские узлы равны 1, начните сравнивать их дочерние узлы.

Согласно нашей логике сравнения, приведенной выше, сначала найдите ту же самую точку &&, не перемещая ее.

Без сомнения нашел 2

Чтобы получить результат сравнения, нет необходимости изменять DOM, поэтому DOM остается на месте.

Начинается второй раунд сравнения

Тогда нет узлов с одинаковым &&, которые не нужно перемещать.

Только второй план, начни искать ту же точку

Найдите узел 5, то же самое, но в другом месте, поэтому нужно переместить

После получения результата сравнения DOM-дереву страницы необходимо переместить DOM, без изменений, он перемещается как есть.

Начинается третий раунд сравнения

Продолжай, о рев, тот же узел пропал, другого выхода нет, только создавать

Поэтому создайте и вставьте на основе узлов, не найденных в новом Vnode.

Тогда некоторые узлы в старом Vnode не существуют в новом VNode, поэтому удалите их.

Итак, начните создавать узлы 6 и 9 и удалите узлы 4 и 5.

Затем страница обновляется

Как насчет, вам интересно, просто посмотрите на исходный код, если вам интересно, ха-ха

Исходная версия будет выпущена позже.

наконец

Ввиду моих ограниченных возможностей неизбежно будут упущения и ошибки.Пожалуйста, потерпите меня.Если есть какие-либо неуместные описания, пожалуйста, свяжитесь со мной в фоновом режиме, большое спасибо.