From 52578fd5f2ba845556aaef1340e21cdc8eab5f2b Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <stasvarenkin@gmail.com>
Date: Sun, 19 Jul 2020 20:39:35 +0300
Subject: [PATCH] Remove outdated section of keying siblings under v-if (#254)

Vue 3 does keying automatically on a compiler level, so this section is outdated.

Example of auto keying: https://vue-next-template-explorer.netlify.app/#%7B%22src%22%3A%22%3Cdiv%3E%5Cr%5Cn%20%20%3Cdiv%20v-if%3D%5C%22exp%5C%22%3E1%3C%2Fdiv%3E%5Cr%5Cn%20%20%3Cdiv%20v-else%3E2%3C%2Fdiv%3E%5Cr%5Cn%3C%2Fdiv%3E%22%2C%22options%22%3A%7B%22mode%22%3A%22module%22%2C%22prefixIdentifiers%22%3Afalse%2C%22optimizeImports%22%3Afalse%2C%22hoistStatic%22%3Afalse%2C%22cacheHandlers%22%3Afalse%2C%22scopeId%22%3Anull%2C%22ssrCssVars%22%3A%22%7B%20color%20%7D%22%2C%22optimizeBindings%22%3Afalse%7D%7D
---
 src/style-guide/README.md | 40 ---------------------------------------
 1 file changed, 40 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index c21f5df24e..6115f65745 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -1520,46 +1520,6 @@ computed: {
 ```
 </div>
 
-## Priority D Rules: Use with Caution <span class="hide-from-sidebar">(Potentially Dangerous Patterns)</span>
-
-### `v-if`/`v-else-if`/`v-else` without `key` <sup data-p="d">use with caution</sup>
-
-**It's usually best to use `key` with `v-if` + `v-else`, if they are the same element type (e.g. both `<div>` elements).**
-
-By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have [unintended consequences](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-priority-d-rules-unintended-consequences) if these elements should not actually be considered the same.
-
-<div class="style-example style-example-bad">
-<h4>Bad</h4>
-
-``` html
-<div v-if="error">
-  Error: {{ error }}
-</div>
-<div v-else>
-  {{ results }}
-</div>
-```
-</div>
-
-<div class="style-example style-example-good">
-<h4>Good</h4>
-
-``` html
-<div
-  v-if="error"
-  key="search-status"
->
-  Error: {{ error }}
-</div>
-<div
-  v-else
-  key="search-results"
->
-  {{ results }}
-</div>
-```
-</div>
-
 ### Element selectors with `scoped` <sup data-p="d">use with caution</sup>
 
 **Element selectors should be avoided with `scoped`.**