Сериализация и данные узла

О чём эта страница

Слой отрисовки получает видимые строки как JSON, которые формирует assembly/tree-serializer.ts. Он не проходит через общий JSON.stringify:

• каждое поле дописывается по фиксированному шаблону, поэтому обобщённому сериализатору не нужно обходить объекты и проверять типы;
• небольшие целые используют таблицу ITOA (строки для 0..4095 подготовлены заранее) — она покрывает leftNode / rightNode / deep / checked / selected, поэтому при прокрутке не выделяется память под .toString() на каждую строку;
• строки экранируются только тогда, когда в них действительно есть специальные символы.

Сверху компонент добавляет кэш JSON: когда позиция прокрутки и видимый набор не изменились, результат предыдущей сериализации переиспользуется.

Данные узла (TreeNodeData)

Поле	Тип	Описание
id / name / parentId	string	Исходный идентификатор и отображаемое имя
leftNode / rightNode	number	Границы MPTT, пересчитываются по parentId при построении
deep	number	Глубина; потомок корня имеет 0
checked	CheckType	Состояние чекбокса: UNCHECKED / CHECKED / HALF_CHECKED
selected	CheckType	Состояние выбора по клику (режим SELECT)
collapsed	boolean	Свёрнут ли узел
disabled	boolean	Отключён ли узел
extendData	Record<string, unknown>	Полная копия исходной строки; именно её получает filterFn
isLastChild	boolean?	Последний ли это потомок родителя (только при включённом showLine)
guideMask	number?	Битовая маска продолжения столбцов предков (только при showLine)
markerLine	'none' | 'upper' | 'lower' | 'full'?	Отрезок в маркерном столбце (только при showLine)

Последние три поля предвычисляет слой отрисовки (см. lib/guide.ts), это не данные WASM; при выключенном showLine они не записываются, и строки остаются лёгкими.

Использование

Сама сериализация внутренняя для компонента; приложения обычно заботятся о двух вещах:

<!-- 1) только ID: дешевле всего сериализовать и передавать -->
<VueGiantTree :tree="rows" root="root" v-model="selectedIds" />

<!-- 2) полные узлы (включая extendData): outputIdOnly = false -->
<VueGiantTree :tree="rows" root="root" :output-id-only="false" v-model="selectedNodes" />

extendData — полная копия входного JSON каждой строки, поэтому бизнес-поля из бэкенда можно использовать напрямую в filterFn, слоте #node и слоте #actions, без дополнительного сопоставления.

Попробуйте

Переключите «Размер данных» на 10k и прокрутите: число строк в DOM по-прежнему зависит только от высоты области просмотра — сериализация происходит только для видимых строк.