У меня есть приложение Vue, которое отображает вложенную древовидную структуру данных. В структуре есть только два случая - логические значения на листьях дерева и записи значений ключа как внутренние узлы дерева.
Логический случай внутренне кодируется как { type: 'bool', value: <boolean value> } запись. Регистр записи имеет внутреннюю кодировку { type: 'record', value: <js object> }. Поле 'type' упрощает диспетчеризацию между Vue компонентами для визуализации конкретного случая:
https://codesandbox.io/s/vue2-reactivity-issue-kbg4c
Логический компонент case позволяет переключать значение логического значения, щелкнув по нему.
Теперь предположим, что отображается следующая структура:
record({
a: record({ a1: bool, a2: bool }),
b: bool,
c: bool,
d: record({ d1: bool, d2: bool })
});
Когда я нажимаю на bool, соответствующее полю "a1", я вижу, что " Компоненты a1 "и" a2 "обновляются. Я вставил трассировку в ловушку "обновленного" компонента, поэтому в консоли видно, какие компоненты обновляются.
Когда я нажимаю на bool, соответствующее полю "b", каждые компоненты в приложении обновляются - даже самые вложенные компоненты, такие как «d1» и «d2».
Это кажется мне ненужным обновлением. Почему они случаются и как этого избежать?