// 生成 defaultExpandedKeys 的 Map 对象 const expandedKeysMap = this.defaultExpandedKeys.reduce((map, key) => { map[key] = true; return map; }, {}); // 查找时 if (expandedKeysMap[key]) { // do something }
defaultExpandedKeys.includes 的事件复杂度是 O(n)， expandedKeysMap[key] 的时间复杂度是 O(1)。
更多关于优化 Vue 应用性能可以查看Vue 应用性能优化指南。
这样做的价值
应用性能对于用户体验的提升是非常重要的，也往往是容易被忽视的。试想一下，一个在某台设备运行良好的应用，到了另一台配置较差的设备上导致用户浏览器崩溃了，这一定是一个不好的体验。又或者你的应用在常规数据下正常运行，却在大数据量下需要相当长的等待时间，也许你就因此错失了一部分用户。
总结
性能优化是一个长久不衰的话题，没有一种通用的办法能够解决所有的性能问题。性能优化是可以持续不端地进行下去的，但随着问题的深入，性能瓶颈会越来越不明显，优化也越困难。
本文的示例具有一定的特殊性，但它为我们指引了性能优化的方法论。
确定衡量运行时性能的指标
确定优化目标，例如实现 1W+ 数据的秒出
使用工具（Chrome Performance）分析性能问题
优先解决问题的大头（瓶颈）
重复 3 4 步直到实现目标
以上所述是小编给大家介绍的Cookbook组件形式：优化 Vue 组件的运行时性能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: