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

^謹慎使用

如果一組 v-if + v-else 的元素類型相同，最好使用 key (比如兩個 <div> 元素)。

默認情況下，Vue 會盡可能高效的更新 DOM。這意味著其在相同類型的元素之間切換時，會修補已存在的元素，而不是將舊的元素移除然後在同一位置添加一個新元素。如果本不相同的元素被識別為相同，則會出現意料之外的副作用。

如以下示例：在沒有添加key屬性的情況下，點擊“Edit”也會觸"submit"元素的默認事件

反例：

1. <script src="https://unpkg.com/vue"></script>
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值就正常了。

正例：

1. <script src="https://unpkg.com/vue"></script>
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/

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