微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用Webpack后Vuejs v-for性能问题

如何解决使用Webpack后Vuejs v-for性能问题

我一直在使用几年前创建的数据表组件,该组件呈现二维数组。我能够对列进行排序,分页和过滤。整个过程真的非常快。最近,我冒险使用webpack并为我的数据表创建一个合适的.vue组件。您可以使用相同的代码,但是现在执行排序,分页和筛选的性能要慢得多。使用webpack会导致反应性能大大下降吗?

简单代码示例-

<table>
  <tr v-for="row in pagedData">
    <td v-for="column in columns">
      {{row[column.property]}}
    </td>
  </tr>
</table>

解决方法

事实证明,问题与Google Chrome有关。我用尽了所有方法(比我可能学到的更多有关虚拟DOM的知识),我尝试了Edge和Firefox上没有延迟的页面。快速重新安装Chrome可以解决此问题。只是我读过here的注释,使用vue SFC确实会导致性能下降,因为编译是在运行时发生的。可能是我误解了这句话的意思。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。