如何深入理解Vue中key属性的作用与实现原理？

本文共计1048个文字，预计阅读时间需要5分钟。

若应用缺乏此特性，Vue 应用采用 in-place patch（就地更新）策略。列表排序或打乱顺序等变动时，Vue 为提升性能，不会移动 DOM 元素，仅更新相应元素的文本内容。

如果没有这个属性的时候vue应用 in-place patch（就地复用）策略。列表里的顺序发生改变的时候比如shuffle（列表打乱）的时候，vue为了提升性能，不会移动dom元素，只是更新相应元素的内容节点。

就地复用的弊端

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

如上引用自官网，这个模式就是上面的“就地复用”策略。那么是不是依赖子组件状态的列表渲染采用上面的模式就出问题了呢。