第十七章 最佳实践 -- 在v-if/v-if-else/v-else中使用key

 

<div v-if="error" key="search-status">
    错误{{error}}
</div>
<div v-else key="search-results">
   {{results}}
</div>

如果一组v-if+v-else的元素类型相同，最好使用属性key。

如果添加了属性key，那么在对比虚拟dom时，则会认为是两个不同的节点，于是会将旧元素移除并在相同的位置添加一个新元素，从而避免意料之外的副作用。

为什么要使用key呢？

v-if指令在编译后如下，所以当状态发生变化时，生成的虚拟节点既有可能是在v-if上的虚拟节点，也有可能是v-else上的虚拟节点。

(has)
    ? _c('li',[_v("if")])
    : _c('li',[_v("else")])

　　默认情况下，vue.js会尽可能高效地更新DOM。这意味着，当它在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除，然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会出现意料之外的副作用。