VueJs 中的反应性问题 - 不必要的更新答案

【问题标题】：Reactivity issue in VueJs - unnecessary updatesVueJs 中的反应性问题 - 不必要的更新
【发布时间】：2020-11-27 17:55:17
【问题描述】：

我有一个 Vue 应用程序，它呈现嵌套的树状数据结构。该结构只有两种情况 - 树的叶子上的布尔值和作为内部树节点的键值记录。

布尔大小写在内部编码为{ type: 'bool', value: <boolean value> } 记录。记录案例内部编码为{ type: 'record', value: <js object> }。 'type' 字段可以更容易地在 Vue 组件之间分派以呈现特定案例：

boolean case组件允许通过点击来切换boolean的值。

现在假设渲染了以下结构：

record({
  a: record({ a1: bool, a2: bool }),
  b: bool,
  c: bool,
  d: record({ d1: bool, d2: bool })
});

当我单击与“a1”字段对应的布尔值时，我看到“a1”和“a2”组件正在更新。 我已将跟踪插入到“更新的”组件挂钩中，因此在控制台中可以看到更新了哪些组件。

当我点击与“b”字段对应的布尔值时，应用程序中的每个组件都会被更新——即使是最嵌套的组件，例如“d1”和“d2”。

这在我看来是不必要的更新。为什么会发生以及如何避免？

【问题讨论】：

我认为你应该尝试使用数组而不是对象——比如[{id: number, value: boolean, title: string, children: array}] 然后，使用v-for 和:key Vue 将能够只修补那些数据已更改的 VNode (使用钥匙）

【解决方案1】：

最好的起点是这篇文章https://vuejs.org/v2/guide/reactivity.html

您将bool 对象链接到整个状态的第一个问题。

您修改的第二个完全说明了每个突变。

【讨论】：

啊，很好地捕获了整个州共享的bool 对象！随着这个问题的解决，问题归结为modifyAtom 函数中状态的更新方式。从头开始重新创建状态部分会触发大量更新，而组件更新不会：codesandbox.io/s/vue2-reactivity-issue-forked-388z3?file=/src/… 我不太明白有什么区别。为什么后遗症如此严重？ Version 2 使整个组件树被更新。我本来预计会产生更本地化的影响。