Чем отличается реализация non-keyed от keyed в javascript фреймворках?

Часто, при разработке сайтов на фреймворках, не придаётся особого внимания деталям, которые в данный фреймворк включены. И это нормально, ведь главная задача фреймворка - чтобы удобно было сайт делать и чтобы он был быстрым и функциональным. Но, эти детали тем и интересны, что узнав некоторые моменты, взгляд на javascript разработку чуть дополняется.

Одной из таких деталей является keyed реализация. Что это такое?

Keyed реализация - это прежде всего создание ассоциации между данными и DOM узлом. То-есть, при изменении данных благодаря данной реализации меняются сами DOM узлы. Non-keyed же таким образом не совсем связана с DOM узлом.

В большинстве фреймворков сегодня есть специальная конструкция, благодаря которой повторяются DOM узлы в зависимости от данных. Допустим, в таком фреймворке как Cample.js данной конструкцией (non-keyed) является класс Each:

const newEach = new Each("new-each",
    ()=>["val1","val2","val3"],
    "<div><input type="text"/>{{data}}</div>"
);

В данном примере, если повторить данный HTML разметку 3 раза, то будет такой результат:

<div><input type="text"/>val1</div>
<div><input type="text"/>val2</div>
<div><input type="text"/>val3</div>

Так вот, что будет если в non-keyed реализации придут новые данные, где будет уже массив, но уже не с тремя элементами, а с двумя? И также, если будет введены в input какие-то данные, то что там будет, когда в данную конструкцию цикла придёт два элемента?

<div><input value="1" type="text"/>val1</div>
<div><input value="2" type="text"/>val2</div>
<div><input value="3" type="text"/>val3</div>

Результат будет примерно следующим, если данные будут иметь следующий вид:

const newEach = new Each("new-each",
    ()=>["val1","val3"],
    "<div><input type="text"/>{{data}}</div>"
);

Сам же HTML будет выглядеть так, если также ввести в input какие-то данные:

<div><input value="1" type="text"/>val1</div>
<div><input value="2" type="text"/>val3</div>

То-есть, видно, что в non-keyed реализации информация в DOM узлах сохраняется не так, как это было бы в keyed реализации, потому что нету ассоциации благодаря ключу.

Таким образом, сравниваются два массива данных, где раньше было 3 элемента, а стало 2, значит данные уменьшились на 1 единицу, и тогда надо удалить последний блок в DOM, ведь нету ассоциации с ключом. Если бы ассоциация была, то код выглядел бы следующим образом:

<div><input value="1" type="text"/>val1</div>
<div><input value="3" type="text"/>val3</div>

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

Конечно, это один из маленьких примеров того, какие особенности есть у javascript фреймворков, но, тем наверное и интереснее работа с ними и создание сайтов благодаря ним.

Надеюсь, данная статья была Вам интересна. Спасибо большое за прочтение!