javascript - 防止 Vue.js 重新渲染子组件

我有一个复杂的组件，它在一个render函数中完成所有渲染。这有多个部分，并且视图的不同位被渲染 - 其中之一是过滤器栏，显示已应用的过滤器。

我注意到发生的事情是，如果我应用一个过滤器来呈现这个栏，它会导致其他所有内容都被完全重新渲染。这导致了许多其他问题，我需要尝试阻止它发生。

我在使用普通模板时从未遇到过这个问题，因为 Vue 似乎可以非常智能地处理这些问题，但我不知道如何解决这个问题。我唯一能想到的是key在我不想重新渲染的每一件事上设置 a，但不确定这是否会 a）解决问题，并且 b）对于通过插槽传递的内容是可能的

有没有其他人遇到过这个问题，如果是这样，如何解决？

标签： javascriptvue.js

在复杂组件中使用 vuetify 文本输入时，我遇到了类似的问题，导致应用程序急剧变慢。

在我的搜索中，我发现了这个特定于 vuetify 的链接：

然后从这个 GitHub 问题中发现这实际上是一个 vue 的东西：

并且有计划在此处跟踪它（vue 3 应该解决此问题）：

因此，在阅读完所有这些内容后，我发现了一些解决方法，它们对提高我的应用程序的性能有很大帮助，我希望这些对您也有帮助：

当有一些代码更改绑定到模板的数据导致重新渲染（将它们放在自己的组件中）时，将那个复杂的组件分成更小的组件
我将所有数据层控件移至 vuex 存储，而不是使用v-model每个位置并将数据作为事件和道具传递，所有数据都通过操作在存储中更新并通过 getter 从存储中读取。（从数据我的意思是在模板中循环的东西v-for，API结果等等......所有这些都被设置，更新和读取通过商店。我的组件仍然有数据对象，但仅用于与样式和模板控件相关的东西，例如用于控制模态的布尔值或模板中使用的导入图标等）
最后我写了一个函数lazyCaller，它的工作是延迟更新存储中的值（当不需要立即更新数据时），以避免来自文本输入之类的快速更新（没有这个每次击键都会触发值更新动作）