edits when reviewing Chinese translation

Note: these changes are already reflected in the review commits for the
Chinese translation and do not need to be translated.

Author: yyx990803

src/guide/best-practices/performance.md

@@ -10,7 +10,7 @@ Vue is designed to be performant for most common use cases without much need for
 
 First, let's discuss the two major aspects of web performance:
 
-- **Page Load Performance**: how fast the application shows content and becomes interactive on the initial visit. This is usually measured using web vital metrics like [Largest Contentful Paint (LCP)](https://web.dev/lcp/) and [First Input Delay](https://web.dev/fid/).
+- **Page Load Performance**: how fast the application shows content and becomes interactive on the initial visit. This is usually measured using web vital metrics like [Largest Contentful Paint (LCP)](https://web.dev/lcp/) and [First Input Delay (FID)](https://web.dev/fid/).
 
 - **Update Performance**: how fast the application updates in response to user input. For example, how fast a list updates when the user types in a search box, or how fast the page switches when the user clicks a navigation link in a Single-Page Application (SPA).
 

src/guide/best-practices/security.md

@@ -72,9 +72,9 @@ In any web application, allowing unsanitized, user-provided content to be execut
 
 For example, services like CodePen and JSFiddle allow user-provided content to be executed, but it's in a context where this is expected and sandboxed to some extent inside iframes. In the cases when an important feature inherently requires some level of vulnerability, it's up to your team to weigh the importance of the feature against the worst-case scenarios the vulnerability enables.
 
-### Injecting HTML
+### HTML Injection
 
-As you learned earlier, Vue automatically escapes HTML content, preventing you from accidentally injecting executable HTML into your application. However, in cases where you know the HTML is safe, you can explicitly render HTML content:
+As you learned earlier, Vue automatically escapes HTML content, preventing you from accidentally injecting executable HTML into your application. However, **in cases where you know the HTML is safe**, you can explicitly render HTML content:
 
 - Using a template:
 
@@ -96,11 +96,11 @@ As you learned earlier, Vue automatically escapes HTML content, preventing you f
   <div innerHTML={this.userProvidedHtml}></div>
   ```
 
-:::tip
-Note that user-provided HTML can never be considered 100% safe unless it's in a sandboxed iframe or in a part of the app where only the user who wrote that HTML can ever be exposed to it. Additionally, allowing users to write their own Vue templates brings similar dangers.
+:::warning
+User-provided HTML can never be considered 100% safe unless it's in a sandboxed iframe or in a part of the app where only the user who wrote that HTML can ever be exposed to it. Additionally, allowing users to write their own Vue templates brings similar dangers.
 :::
 
-### Injecting URLs
+### URL Injection
 
 In a URL like this:
 
@@ -110,13 +110,9 @@ In a URL like this:
 </a>
 ```
 
-There's a potential security issue if the URL has not been "sanitized" to prevent JavaScript execution using `javascript:`. There are libraries such as [sanitize-url](https://www.npmjs.com/package/@braintree/sanitize-url) to help with this, but note:
+There's a potential security issue if the URL has not been "sanitized" to prevent JavaScript execution using `javascript:`. There are libraries such as [sanitize-url](https://www.npmjs.com/package/@braintree/sanitize-url) to help with this, but note: if you're ever doing URL sanitization on the frontend, you already have a security issue. **User-provided URLs should always be sanitized by your backend before even being saved to a database.** Then the problem is avoided for _every_ client connecting to your API, including native mobile apps. Also note that even with sanitized URLs, Vue cannot help you guarantee that they lead to safe destinations.
 
-:::tip
-If you're ever doing URL sanitization on the frontend, you already have a security issue. User-provided URLs should always be sanitized by your backend before even being saved to a database. Then the problem is avoided for _every_ client connecting to your API, including native mobile apps. Also note that even with sanitized URLs, Vue cannot help you guarantee that they lead to safe destinations.
-:::
-
-### Injecting Styles
+### Style Injection
 
 Looking at this example:
 
@@ -151,21 +147,21 @@ To keep your users fully safe from click jacking, we recommend only allowing ful
 </a>
 ```
 
-### Injecting JavaScript
+### JavaScript Injection
 
 We strongly discourage ever rendering a `<script>` element with Vue, since templates and render functions should never have side effects. However, this isn't the only way to include strings that would be evaluated as JavaScript at runtime.
 
 Every HTML element has attributes with values accepting strings of JavaScript, such as `onclick`, `onfocus`, and `onmouseenter`. Binding user-provided JavaScript to any of these event attributes is a potential security risk, so should be avoided.
 
-:::tip
-Note that user-provided JavaScript can never be considered 100% safe unless it's in a sandboxed iframe or in a part of the app where only the user who wrote that JavaScript can ever be exposed to it.
+:::warning
+User-provided JavaScript can never be considered 100% safe unless it's in a sandboxed iframe or in a part of the app where only the user who wrote that JavaScript can ever be exposed to it.
 :::
 
 Sometimes we receive vulnerability reports on how it's possible to do cross-site scripting (XSS) in Vue templates. In general, we do not consider such cases to be actual vulnerabilities, because there's no practical way to protect developers from the two scenarios that would allow XSS:
 
 1. The developer is explicitly asking Vue to render user-provided, unsanitized content as Vue templates. This is inherently unsafe and there's no way for Vue to know the origin.
 
-2. The developer is mounting Vue to an entire HTML page which happens to contain server-rendered and user-provided content. This is fundamentally the same problem as \#1, but sometimes devs may do it without realizing. This can lead to possible vulnerabilities where the attacker provides HTML which is safe as plain HTML but unsafe as a Vue template. The best practice is to never mount Vue on nodes that may contain server-rendered and user-provided content.
+2. The developer is mounting Vue to an entire HTML page which happens to contain server-rendered and user-provided content. This is fundamentally the same problem as \#1, but sometimes devs may do it without realizing. This can lead to possible vulnerabilities where the attacker provides HTML which is safe as plain HTML but unsafe as a Vue template. The best practice is to **never mount Vue on nodes that may contain server-rendered and user-provided content**.
 
 ## Best Practices
 

src/guide/built-ins/keep-alive.md

@@ -14,7 +14,7 @@ In the Component Basics chapter, we introduced the syntax for [Dynamic Component
 <component :is="activeComponent" />
 ```
 
-By default, an active component instance will be unmounted when switched away from. This will cause any changed state it holds to be lost.
+By default, an active component instance will be unmounted when switched away from. This will cause any changed state it holds to be lost. When this component is displayed again, a new instance will be created with only the initial state.
 
 In the example below, we have two stateful components - A contains a counter, while B contains a message synced with an input via `v-model`. Try updating the state of one of them, switch away, and then switch back to it:
 
@@ -73,6 +73,10 @@ By default, `<KeepAlive>` will cache any component instance inside. We can custo
 
 The match is checked against the component's [`name`](/api/options-misc.html#name) option, so components that need to be conditionally cached by `KeepAlive` must explicitly declare a `name` option.
 
+:::tip
+Since version 3.2.34, a single-file component using `<script setup>` will automatically infer its `name` option based on the filename, removing the need to manually declare the name.
+:::
+
 ## Max Cached Instances
 
 We can limit the maximum number of component instances that can be cached via the `max` prop. When `max` is specified, `<KeepAlive>` behaves like an [LRU cache](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>): if the number of cached instances is about to exceed the specified max count, the least recently accessed cached instance will be destroyed to make room for the new one.

src/guide/built-ins/transition.md

@@ -499,7 +499,7 @@ Now `MyTransition` can be imported and used just like the built-in version:
 
 ## Transition on Appear
 
-If you also want to apply a transition on the initial render of a node, you can add the `appear` attribute:
+If you also want to apply a transition on the initial render of a node, you can add the `appear` prop:
 
 ```vue-html
 <Transition appear>
@@ -509,7 +509,7 @@ If you also want to apply a transition on the initial render of a node, you can
 
 ## Transition Between Elements
 
-In addition to toggling an element with `v-if` / `v-show`, we can also transition between two elements using `v-if` / `v-else` / `v-else-if`:
+In addition to toggling an element with `v-if` / `v-show`, we can also transition between two elements using `v-if` / `v-else` / `v-else-if`, as long as we make sure that there is only one element being shown at any given moment:
 
 ```vue-html
 <Transition>

src/guide/components/async.md

@@ -18,7 +18,7 @@ const AsyncComp = defineAsyncComponent(() => {
 
 As you can see, `defineAsyncComponent` accepts a loader function that returns a Promise. The Promise's `resolve` callback should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed.
 
-[ES module dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) also returns a Promise, so most of the time we will use it in combination with `defineAsyncComponent`. Bundlers like Vite and webpack also support the syntax, so we can use it to import Vue SFCs:
+[ES module dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) also returns a Promise, so most of the time we will use it in combination with `defineAsyncComponent`. Bundlers like Vite and webpack also support the syntax (and will use it as bundle split points), so we can use it to import Vue SFCs:
 
 ```js
 import { defineAsyncComponent } from 'vue'

src/guide/components/attrs.md

@@ -29,6 +29,8 @@ The final rendered DOM would be:
 <button class="large">click me</button>
 ```
 
+Here, `<MyButton>` did not declare `class` as an accepted prop. Therefore, `class` is treated as a fallthrough attribute and automatically added to `<MyButton>`'s root element.
+
 ### `class` and `style` Merging
 
 If the child component's root element already has existing `class` or `style` attributes, it will be merged with the `class` and `style` values that are inherited from the parent. Suppose we change the template of `<MyButton>` in the previous example to:

src/guide/components/events.md

@@ -46,7 +46,7 @@ The `.once` modifier is also supported on component event listeners:
 Like components and props, event names provide an automatic case transformation. Notice we emitted a camelCase event, but can listen for it using a kebab-cased listener in the parent. As with [props casing](/guide/components/props.html#prop-name-casing), we recommend using kebab-cased event listeners in templates.
 
 :::tip
-Unlike native DOM events, component emitted events do **not** bubble. You can only listen to the events emitted by a direct child component.
+Unlike native DOM events, component emitted events do **not** bubble. You can only listen to the events emitted by a direct child component. If there is a need to communicate between sibling or deeply nested components, use an external event bus or a [global state management solution](/guide/scaling-up/state-management.html).
 :::
 
 ## Event Arguments
@@ -203,7 +203,7 @@ See also: [Typing Component Emits](/guide/typescript/options-api.html#typing-com
 
 </div>
 
-Although optional, it is recommended to define all emitted events in order to better document how a component should work. It also allows Vue to exclude known listeners from [fallthrough attributes](/guide/components/attrs.html#v-on-listener-inheritance).
+Although optional, it is recommended to define all emitted events in order to better document how a component should work. It also allows Vue to exclude known listeners from [fallthrough attributes](/guide/components/attrs.html#v-on-listener-inheritance), avoiding edge cases caused by DOM events manually dispatched by 3rd party code.
 
 :::tip
 If a native event (e.g., `click`) is defined in the `emits` option, the listener will now only listen to component-emitted `click` events and no longer respond to native `click` events.
@@ -271,13 +271,13 @@ export default {
 
 ## Usage with `v-model`
 
-Custom events can also be used to create custom inputs that work with `v-model`. Remember that:
+Custom events can also be used to create custom inputs that work with `v-model`. Let's revisit how `v-model` is used on a native element:
 
 ```vue-html
 <input v-model="searchText" />
 ```
 
-does the same thing as:
+Under the hood, the template compiler expands `v-model` to the more verbose equivalent for us. So the above code does the same as the following:
 
 ```vue-html
 <input
@@ -286,7 +286,7 @@ does the same thing as:
 />
 ```
 
-When used on a component, `v-model` instead does this:
+When used on a component, `v-model` instead expands to this:
 
 ```vue-html
 <CustomInput
@@ -295,10 +295,10 @@ When used on a component, `v-model` instead does this:
 />
 ```
 
-For this to actually work though, the `<input>` inside the component must:
+For this to actually work though, the `<CustomInput>` component must do two things:
 
-- Bind the `value` attribute to the `modelValue` prop
-- On `input`, emit an `update:modelValue` event with the new value
+1. Bind the `value` attribute of a native `<input>` element to the `modelValue` prop
+2. When a native `input` event is triggered, emit an `update:modelValue` custom event with the new value
 
 Here's that in action:
 
@@ -544,7 +544,7 @@ export default {
 
 ### Handling `v-model` modifiers
 
-When we were learning about form input bindings, we saw that `v-model` has [built-in modifiers](/guide/essentials/forms.html#modifiers) - `.trim`, `.number` and `.lazy`. In some cases, however, you might also want to add your own custom modifiers.
+When we were learning about form input bindings, we saw that `v-model` has [built-in modifiers](/guide/essentials/forms.html#modifiers) - `.trim`, `.number` and `.lazy`. In some cases, you might also want the `v-model` on your custom input component to support custom modifiers.
 
 Let's create an example custom modifier, `capitalize`, that capitalizes the first letter of the string provided by the `v-model` binding:
 

src/guide/components/props.md

@@ -483,7 +483,7 @@ Additional details:
 - All props are optional by default, unless `required: true` is specified.
 
 - An absent optional prop other than `Boolean` will have `undefined` value.
-  
+
 - The `Boolean` absent props will be cast to `false`. You should set a `default` value for it in order to get desired behavior.
 
 - If a `default` value is specified, it will be used if the resolved prop value is `undefined` - this includes both when the prop is absent, or an explicit `undefined` value is passed.
@@ -492,7 +492,7 @@ When prop validation fails, Vue will produce a console warning (if using the dev
 
 <div class="composition-api">
 
-If using [Type-based props declarations](/api/sfc-script-setup.html#typescript-only-features), Vue will try its best to compile the type annotations into equivalent runtime prop declarations. For example, `defineProps<{ msg: string }>` will be compiled into `{ msg: { type: String, required: true }}`.
+If using [Type-based props declarations](/api/sfc-script-setup.html#typescript-only-features) <sup class="vt-badge ts" />, Vue will try its best to compile the type annotations into equivalent runtime prop declarations. For example, `defineProps<{ msg: string }>` will be compiled into `{ msg: { type: String, required: true }}`.
 
 </div>
 <div class="options-api">
@@ -550,7 +550,7 @@ export default {
 
 </div>
 
-to validate that the value of the `author` prop was created with `new Person`.
+Vue will use `instanceof Person` to validate whether the value of the `author` prop is indeed an instance of the `Person` class.
 
 ## Boolean Casting
 

src/guide/components/slots.md

@@ -33,9 +33,7 @@ The `<slot>` element is a **slot outlet** that indicates where the parent-provid
 And the final rendered DOM:
 
 ```html
-<button class="fancy-btn">
-  Click me!
-</button>
+<button class="fancy-btn">Click me!</button>
 ```
 
 <div class="composition-api">
@@ -59,11 +57,9 @@ FancyButton('Click me!')
 
 // FancyButton renders slot content in its own template
 function FancyButton(slotContent) {
-  return (
-    `<button class="fancy-btn">
+  return `<button class="fancy-btn">
       ${slotContent}
     </button>`
-  )
 }
 ```
 
@@ -102,9 +98,9 @@ Slot content has access to the data scope of the parent component, because it is
 
 Here both <span v-pre>`{{ message }}`</span> interpolations will render the same content.
 
-Slot content does **not** have access to the child component's data. As a rule, remember that:
+Slot content does **not** have access to the child component's data. Expressions in Vue templates can only access the scope it is defined in, consistent with JavaScript's lexical scoping. In other words:
 
-> Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.
+> Expressions in the parent template only have access to the parent scope; expressions in the child template only have access to the child scope.
 
 ## Fallback Content
 
@@ -292,13 +288,11 @@ BaseLayout({
 
 // <BaseLayout> renders them in different places
 function BaseLayout(slots) {
-  return (
-    `<div class="container">
+  return `<div class="container">
       <header>${slots.header}</header>
       <main>${slots.default}</main>
       <footer>${slots.footer}</footer>
     </div>`
-  )
 }
 ```
 
@@ -373,12 +367,10 @@ MyComponent({
 
 function MyComponent(slots) {
   const greetingMessage = 'hello'
-  return (
-    `<div>${
-      // call the slot function with props!
-      slots.default({ text: greetingMessage, count: 1 })
-    }</div>`
-  )
+  return `<div>${
+    // call the slot function with props!
+    slots.default({ text: greetingMessage, count: 1 })
+  }</div>`
 }
 ```
 
@@ -420,7 +412,6 @@ Passing props to a named slot:
 
 Note the `name` of a slot won't be included in the props because it is reserved - so the resulting `headerProps` would be `{ message: 'hello' }`.
 
-
 ### Fancy List Example
 
 You may be wondering what would be a good use case for scoped slots. Here's an example: imagine a `<FancyList>` component that renders a list of items - it may encapsulate the logic for loading remote data, using the data to display a list, or even advanced features like pagination or infinite scrolling. However, we want it to be flexible with how each item looks and leave the styling of each item to the parent component consuming it. So the desired usage may look like this: