vue的就地更新策略__前端__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

vue有个指令我相信大家都写烂了，就是v-for，只要涉及到有重复元素需要遍历时，就会用到它，但是它还会跟着有个附属条件，就是必须加一个key值，这是为什么呢？

我们首先去vue官网看一下它咋写的：

官网有个维护状态的概念，就是说我们在使用v-for渲染元素列表，它默认使用’就地更新的策略’。这里又提到了这个’就地更新’，这到底是个啥嘞？

别急，我们先看一组很简单的ul -> li结构：

页面效果是这样的：

就是很简单的一个结构，这时，我们点击按钮，给数组增加一个四号，通过观察页面页面元素变化，我们可以发现前三项是没有变化的，只是新增了一个第四项。而这时，我们把点击按钮增在数组最后增加一个元素的操作改成在数组的前面增加一个元素，这时就发生很有意思的事情 — 页面元素都会闪过，表明页面上的元素都发生了变化，仔细观察会发现，其实前三项只会更新了li的内容，dom结构没有发生变化，而第四项是整个新建的。可能这样说比较抽象，我来画个图~

如图所示，第一次的时候在数组后面增加一个元素。在新增时，vue会首先比对前后list，因为前三项没有变化，所以直接在最后面增加一个新结构即可。

第二次的时候在数组的前面增加一个元素。这时，新的list的顺序已经发生了变化，4号变成了数组的第一项，其他的元素依次后延一位，所以在新增加的4号在就会找到原有的第一个dom结构，因为就地更新不会移动dom元素的顺序的，但是dom元素依旧在，我们只需要更新内容即可，但是原来的第三项，现在在数组的第四位，原有的结构已经不够用了，所以这时只有增加一个dom结构。

现在，我们还对之前的结构做一次改变，之前的时候v-for并没有加上key值，这次我们加上:key='item'，因为这个list是个简单数组，没有id，暂且把整个项当成id使用（平时使用要保证id唯一的），这时dom又是怎么更新的呢：

如图所示，当v-for遍历的时候给元素加上了唯一的key，那就不一样了，因为key值具有唯一性，所以更新的时候，新的元素会按照key比对，如果key存在，那么这个元素就不会改变，即之前的1，2，3分别对应，然后4号时新增，只需要在1号元素的前面创建一个新的dom即可。

当然，很多人平时用的是:key:'index'，当然用了不会报错，但是其实’就地更新’策略默认用的就是index，建议还是id做key值。

不知道有没有注意，vue官网还提到一句话 ---- ‘只适用于不依赖子组件状态或临时 DOM 状态’。这句话理解起来也很简单。就是在不加唯一key值时，假设我们把结构稍作改变，在每个li元素前面加上一个状态项checkbox，在点击新增按钮前，把第一项勾选上，但是当我们在前面新增一个元素时，发现原有应该在1号身上的小勾变成了4号被✔了，这就是vue’就地更新’的锅。