这 22 个 Vue3 的实用技巧，你可能还不知道！

发布时间：2024-08-04 16:01

以下内容来自公众号逆锋起笔，关注每日干货及时送达

作者：月夕

链接：https://juejin.cn/post/7005880217684148231

演示代码使用 Vue3 + ts + Vite 编写，但是也会列出适用于 Vue2 的优化技巧，如果某个优化只适用于 Vue3 或者 Vue2，我会在标题中标出来。

一、代码优化

使用 v-for 更新已渲染的元素列表时，默认用就地复用策略；列表数据修改的时候，他会根据 key 值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素；

使用key的注意事项：

不要使用可能重复的或者可能变化 key 值（控制台也会给出提醒）
如果数组中的数据有状态需要维持时（例如输入框），不要使用数组的 index 作为 key 值，因为如果在数组中插入或者移除一个元素时，其后面的元素 index 将会变化，这回让vue进行原地复用时错误的绑定状态。
如果数组中没有唯一的 key值可用，且数组更新时不是全量更新而是采用类似push，splice来插入或者移除数据时，可以考虑对其添加一个 key 字段，值为 Symbol() 即可保证唯一。