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

【问题标题】：Performance impact of stacking multiple Vue components堆叠多个 Vue 组件的性能影响
【发布时间】：2018-03-23 17:56:16
【问题描述】：

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

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

我的目标是尽可能多地重用代码。这就是为什么我计划在我的 Table.vue 组件中添加一个小的 UserProfile.vue 组件。使用这个逻辑，我也可以对其他信息重复此操作（想想 CompanyProfile.vue、ProjectDetail.vue 等）。

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

【问题讨论】：

这在很大程度上取决于您从组件绑定到组件的状态。如果您将大量 props 传递给经常发生变异的子组件并强制重绘子组件，理论上您可能会遇到一些性能问题。但是，确定您是否达到该阈值的唯一方法是针对具体示例进行操作。您最好避免过早的优化，而是专注于出色的关注点分离。

标签： vue.js

【解决方案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

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

【讨论】：