From 2cc09cba882c92e4dee14404dceaa0508538651f Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Fri, 29 Nov 2024 23:03:08 +0800
Subject: [PATCH 1/4] docs: hide all the style-guide links until it's ready

---
 src/guide/essentials/conditional.md |  8 +++++++-
 src/guide/essentials/list.md        | 10 ++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/guide/essentials/conditional.md b/src/guide/essentials/conditional.md
index e33ac4d272..5eb391d027 100644
--- a/src/guide/essentials/conditional.md
+++ b/src/guide/essentials/conditional.md
@@ -111,7 +111,13 @@ Generally speaking, `v-if` has higher toggle costs while `v-show` has higher ini
 ## `v-if` with `v-for` {#v-if-with-v-for}
 
 ::: warning Note
-It's **not** recommended to use `v-if` and `v-for` on the same element due to implicit precedence. Refer to [style guide](/style-guide/rules-essential#avoid-v-if-with-v-for) for details.
+It's **not** recommended to use `v-if` and `v-for` on the same element due to implicit precedence.
+
+There are two common cases where this can be tempting:
+
+- To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace `users` with a new computed property that returns your filtered list (e.g. `activeUsers`).
+
+- To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
 :::
 
 When `v-if` and `v-for` are both used on the same element, `v-if` will be evaluated first. See the [list rendering guide](list#v-for-with-v-if) for details.
diff --git a/src/guide/essentials/list.md b/src/guide/essentials/list.md
index 2f7943c86b..74a42ae396 100644
--- a/src/guide/essentials/list.md
+++ b/src/guide/essentials/list.md
@@ -224,7 +224,13 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
 ## `v-for` with `v-if` {#v-for-with-v-if}
 
 :::warning Note
-It's **not** recommended to use `v-if` and `v-for` on the same element due to implicit precedence. Refer to [style guide](/style-guide/rules-essential#avoid-v-if-with-v-for) for details.
+It's **not** recommended to use `v-if` and `v-for` on the same element due to implicit precedence.
+
+There are two common cases where this can be tempting:
+
+- To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace `users` with a new computed property that returns your filtered list (e.g. `activeUsers`).
+
+- To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
 :::
 
 When they exist on the same node, `v-if` has a higher priority than `v-for`. That means the `v-if` condition will not have access to variables from the scope of the `v-for`:
@@ -275,7 +281,7 @@ When using `<template v-for>`, the `key` should be placed on the `<template>` co
 `key` here is a special attribute being bound with `v-bind`. It should not be confused with the property key variable when [using `v-for` with an object](#v-for-with-an-object).
 :::
 
-[It is recommended](/style-guide/rules-essential#use-keyed-v-for) to provide a `key` attribute with `v-for` whenever possible, unless the iterated DOM content is simple (i.e. contains no components or stateful DOM elements), or you are intentionally relying on the default behavior for performance gains.
+It is recommended to provide a `key` attribute with `v-for` whenever possible, unless the iterated DOM content is simple (i.e. contains no components or stateful DOM elements), or you are intentionally relying on the default behavior for performance gains.
 
 The `key` binding expects primitive values - i.e. strings and numbers. Do not use objects as `v-for` keys. For detailed usage of the `key` attribute, please see the [`key` API documentation](/api/built-in-special-attributes#key).
 

From 0439aa9e957c8459591bdb9c517e49d70bdc6765 Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Fri, 29 Nov 2024 23:11:51 +0800
Subject: [PATCH 2/4] docs: add outdated warnings on style guide pages

---
 src/style-guide/rules-essential.md            | 4 ++++
 src/style-guide/rules-recommended.md          | 4 ++++
 src/style-guide/rules-strongly-recommended.md | 4 ++++
 src/style-guide/rules-use-with-caution.md     | 4 ++++
 4 files changed, 16 insertions(+)

diff --git a/src/style-guide/rules-essential.md b/src/style-guide/rules-essential.md
index 722d8aec84..0872dc499e 100644
--- a/src/style-guide/rules-essential.md
+++ b/src/style-guide/rules-essential.md
@@ -1,5 +1,9 @@
 # Priority A Rules: Essential {#priority-a-rules-essential}
 
+::: warning Note
+This Vue.js Style Guide is outdated and needs to be reviewed. If you have any questions or suggestions, please [open an issue](https://github.com/vuejs/docs/issues/new).
+:::
+
 These rules help prevent errors, so learn and abide by them at all costs. Exceptions may exist, but should be very rare and only be made by those with expert knowledge of both JavaScript and Vue.
 
 ## Use multi-word component names {#use-multi-word-component-names}
diff --git a/src/style-guide/rules-recommended.md b/src/style-guide/rules-recommended.md
index 7c0bcd869f..26291169ce 100644
--- a/src/style-guide/rules-recommended.md
+++ b/src/style-guide/rules-recommended.md
@@ -1,5 +1,9 @@
 # Priority C Rules: Recommended {#priority-c-rules-recommended}
 
+::: warning Note
+This Vue.js Style Guide is outdated and needs to be reviewed. If you have any questions or suggestions, please [open an issue](https://github.com/vuejs/docs/issues/new).
+:::
+
 Where multiple, equally good options exist, an arbitrary choice can be made to ensure consistency. In these rules, we describe each acceptable option and suggest a default choice. That means you can feel free to make a different choice in your own codebase, as long as you're consistent and have a good reason. Please do have a good reason though! By adapting to the community standard, you will:
 
 1. Train your brain to more easily parse most of the community code you encounter
diff --git a/src/style-guide/rules-strongly-recommended.md b/src/style-guide/rules-strongly-recommended.md
index 2b9d26028b..8b5c910d97 100644
--- a/src/style-guide/rules-strongly-recommended.md
+++ b/src/style-guide/rules-strongly-recommended.md
@@ -1,5 +1,9 @@
 # Priority B Rules: Strongly Recommended {#priority-b-rules-strongly-recommended}
 
+::: warning Note
+This Vue.js Style Guide is outdated and needs to be reviewed. If you have any questions or suggestions, please [open an issue](https://github.com/vuejs/docs/issues/new).
+:::
+
 These rules have been found to improve readability and/or developer experience in most projects. Your code will still run if you violate them, but violations should be rare and well-justified.
 
 ## Component files {#component-files}
diff --git a/src/style-guide/rules-use-with-caution.md b/src/style-guide/rules-use-with-caution.md
index 203a36c5e7..d8afbc0604 100644
--- a/src/style-guide/rules-use-with-caution.md
+++ b/src/style-guide/rules-use-with-caution.md
@@ -1,5 +1,9 @@
 # Priority D Rules: Use with Caution {#priority-d-rules-use-with-caution}
 
+::: warning Note
+This Vue.js Style Guide is outdated and needs to be reviewed. If you have any questions or suggestions, please [open an issue](https://github.com/vuejs/docs/issues/new).
+:::
+
 Some features of Vue exist to accommodate rare edge cases or smoother migrations from a legacy code base. When overused however, they can make your code more difficult to maintain or even become a source of bugs. These rules shine a light on potentially risky features, describing when and why they should be avoided.
 
 ## Element selectors with `scoped` {#element-selectors-with-scoped}

From f025ee24f7708309c293a0af155f6b2178badbcf Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Fri, 29 Nov 2024 23:23:53 +0800
Subject: [PATCH 3/4] docs: adjust v-for with v-if warnings

---
 src/guide/essentials/conditional.md | 12 +++---------
 src/guide/essentials/list.md        | 20 ++++++++++----------
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/guide/essentials/conditional.md b/src/guide/essentials/conditional.md
index 5eb391d027..a1b507a6a7 100644
--- a/src/guide/essentials/conditional.md
+++ b/src/guide/essentials/conditional.md
@@ -110,14 +110,8 @@ Generally speaking, `v-if` has higher toggle costs while `v-show` has higher ini
 
 ## `v-if` with `v-for` {#v-if-with-v-for}
 
-::: warning Note
-It's **not** recommended to use `v-if` and `v-for` on the same element due to implicit precedence.
-
-There are two common cases where this can be tempting:
-
-- To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace `users` with a new computed property that returns your filtered list (e.g. `activeUsers`).
+When `v-if` and `v-for` are both used on the same element, `v-if` will be evaluated first. See the [list rendering guide](list#v-for-with-v-if) for details.
 
-- To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
+::: warning Note
+It's **not** recommended to use `v-if` and `v-for` on the same element due to implicit precedence. Refer to [list rendering guide](list#v-for-with-v-if) for details.
 :::
-
-When `v-if` and `v-for` are both used on the same element, `v-if` will be evaluated first. See the [list rendering guide](list#v-for-with-v-if) for details.
diff --git a/src/guide/essentials/list.md b/src/guide/essentials/list.md
index 74a42ae396..9451e41bac 100644
--- a/src/guide/essentials/list.md
+++ b/src/guide/essentials/list.md
@@ -223,16 +223,6 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
 
 ## `v-for` with `v-if` {#v-for-with-v-if}
 
-:::warning Note
-It's **not** recommended to use `v-if` and `v-for` on the same element due to implicit precedence.
-
-There are two common cases where this can be tempting:
-
-- To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace `users` with a new computed property that returns your filtered list (e.g. `activeUsers`).
-
-- To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
-:::
-
 When they exist on the same node, `v-if` has a higher priority than `v-for`. That means the `v-if` condition will not have access to variables from the scope of the `v-for`:
 
 ```vue-html
@@ -255,6 +245,16 @@ This can be fixed by moving `v-for` to a wrapping `<template>` tag (which is als
 </template>
 ```
 
+:::warning Note
+It's **not** recommended to use `v-if` and `v-for` on the same element due to implicit precedence.
+
+There are two common cases where this can be tempting:
+
+- To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace `users` with a new computed property that returns your filtered list (e.g. `activeUsers`).
+
+- To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
+:::
+
 ## Maintaining State with `key` {#maintaining-state-with-key}
 
 When Vue is updating a list of elements rendered with `v-for`, by default it uses an "in-place patch" strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index.

From 832e886cd995fe96ab4f05016c0ab2455125533b Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Fri, 29 Nov 2024 23:27:38 +0800
Subject: [PATCH 4/4] docs: add outdated warning to style-guide index

---
 src/style-guide/index.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/style-guide/index.md b/src/style-guide/index.md
index 537e6599e8..8f7b747f60 100644
--- a/src/style-guide/index.md
+++ b/src/style-guide/index.md
@@ -4,6 +4,10 @@ outline: deep
 
 # Style Guide {#style-guide}
 
+::: warning Note
+This Vue.js Style Guide is outdated and needs to be reviewed. If you have any questions or suggestions, please [open an issue](https://github.com/vuejs/docs/issues/new).
+:::
+
 This is the official style guide for Vue-specific code. If you use Vue in a project, it's a great reference to avoid errors, bikeshedding, and anti-patterns. However, we don't believe that any style guide is ideal for all teams or projects, so mindful deviations are encouraged based on past experience, the surrounding tech stack, and personal values.
 
 For the most part, we also avoid suggestions about JavaScript or HTML in general. We don't mind whether you use semicolons or trailing commas. We don't mind whether your HTML uses single-quotes or double-quotes for attribute values. Some exceptions will exist however, where we've found that a particular pattern is helpful in the context of Vue.