Vue风格指南 - v-if/v-else-if/v-else下的key

Posted 2020-12-28 mjian

没有在 v-if/v-if-else/v-else 中使用 key

^谨慎使用

如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个 <div> 元素)。

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

如以下示例：在没有添加key属性的情况下，点击“Edit”也会触"submit"元素的默认事件

反例：

html代码 

1. <script src="https://unpkg.com/vue"></script>  
2.   
3. <div id="app">  
4.   <form>  
5.     <button v-if="isEditing" type="submit">  
6.       Save    
7.     </button>  
8.     <button v-else @click="isEditing = true">  
9.       Edit  
10.     </button>  
11.   </form>  
12. </div>  

 

而添加不一样的key值就正常了。

正例：

Html代码 

1. <script src="https://unpkg.com/vue"></script>  
2.   
3. <div id="app">  
4.   <form>  
5.     <button v-if="isEditing" type="submit" key="save">  
6.       Save    
7.     </button>  
8.     <button v-else @click="isEditing = true" key="edit">  
9.       Edit  
10.     </button>  
11.   </form>  
12. </div>  

 

 

Vue 风格指南：https://cn.vuejs.org/v2/style-guide/