Thinking -- vue性能优化：保持 props 稳定

2023-04-01 10:51:00 浏览数 (2)

Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想。

在 Vue 中，组件 props 的改变会导致组件更新。由此，确保组件 props 保持稳定，可以有效减少更新次数，提高效率。

示例：

代码语言：javascript复制

<option
  v-for="item in list"
  :id="item.id"
  :active-id="activeId" >
</option>

在 <option> 组件中，它使用了 id 和 activeId 两个 props 来确定它是否是当前活跃的那一项。虽然这是可行的，但问题是每当 activeId 更新时，列表中的每一个 <option> 都会跟着更新！

理想情况下，只有活跃状态发生改变的项才应该更新。我们可以将活跃状态比对的逻辑移入父组件来实现这一点，然后让 <option> 改为接收一个 active prop：

代码语言：javascript复制

<option
  v-for="item in list"
  :id="item.id"
  :active="item.id === activeId" >
</option>

至此，对于大多数的组件来说，activeId 改变时，它们的 active prop 都会保持不变，因此它们无需再更新。

总结一下，这个技巧的核心思想就是让传给子组件的 props 尽量保持稳定。

0 人点赞