堆叠多个Vue组件的性能影响

Question

我正在构建一个使用Vue显示我的用户将看到的大部分数据的应用程序（图表，表格等）

现在，假设我有一个使用Vue构建的表，其中包含每个用户执行的操作列表。现在，用户名单元格将使用用户的图片，社交句柄等进行格式化。用户在此表中的显示方式与其他组件中的方式相同。它还将包含一些特定的功能（例如，悬停在图片上将提供有关用户的扩展信息;但仅计划此功能）。

我的目标是尽可能多地重用代码。这就是我计划在Table.vue组件中有一个小的UserProfile.vue组件的原因。使用这个逻辑，我可以重复这个以获取其他信息（想想CompanyProfile.vue，ProjectDetail.vue等）。

这是个好主意吗？在一个和另一个内部有多个vue组件会导致严重的性能问题吗？

Answer 1

Vue尽可能优化了渲染html的结果。你不需要担心它。子组件仅在各自的数据发生变化时才会更新，这通常非常便宜。

好keep in mind：

  

在创作组件时，最好记住是否打算稍后在其他地方重用它。一次性组件可以紧密耦合，但可重用组件应该定义一个干净的公共接口，并且不对它所使用的上下文做任何假设。

对于较大的应用程序，您可以使用Async Components

  

Vue只会在实际需要渲染组件时触发工厂函数，并将缓存结果以供将来重新渲染。例如：

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // Pass the component definition to the resolve callback
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

我发现了一些你可能想看的有趣主题：

Performance for large number of components

Performance degradation when using components

Unlock performance tracing in vue

Analyze runtime performance

所以现在，你知道该怎么做。希望，它有所帮助。