Apply suggestions from code review

Co-authored-by: 时瑶 <[email protected]>

Author: veaba

src/api/sfc-script-setup.md

@@ -479,9 +479,9 @@ const post = await fetch(`/api/post/1`).then((r) => r.json())
 `async setup()` 必须与 [`Suspense`](/guide/built-ins/suspense.html) 组合使用，该特性目前仍处于实验阶段。我们计划在未来的版本中完成该特性并编写文档——但如果你现在就感兴趣，可以参考其[测试](https://github.com/vuejs/core/blob/main/packages/runtime-core/__tests__/components/Suspense.spec.ts)来了解其工作方式。
 :::
 
-## import 语句 {#imports-statements}
+## 导入语句 {#imports-statements}
 
-vue 中的 import 语句遵循 [ECMAScript 模块规范](https://nodejs.org/api/esm.html)。
+Vue 中的导入语句遵循 [ECMAScript 模块规范](https://nodejs.org/api/esm.html)。
 此外，你还可以使用构建工具配置中定义的别名：
 
 ```vue

src/api/sfc-spec.md

@@ -137,7 +137,7 @@ p {{ msg }}
 ```
 
 :::warning 注意
-在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以在 node 模块中引用资产：
+在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：
 ```vue
 <img src="~some-npm-package/foo.png">
 ```

src/guide/essentials/event-handling.md

@@ -348,6 +348,6 @@ Vue 为一些常用的按键提供了别名：
 
 这些修饰符将处理程序限定为由特定鼠标按键触发的事件。
 
-但请注意，`.left`，`.right` 和 `.middle` 这些修饰符名称是基于常见的右手用鼠标布局设定的，但实际上它们分别代表“主”、”次“，“辅助”指向设备的事件触发，而非实际的物理按键。因此，对于左手用鼠标布局而言，“主”按键在物理上可能是右边的按键，但却会触发 `.left` 修饰符对应的处理程序。又或者，触控板可能通过单指点击触发 `.left` 处理程序，通过双指点击触发 `.right` 处理程序，通过三指点击触发 `.middle` 处理程序。同样，产生“鼠标”事件的其他设备和事件源，也可能具有与“左”，“右”完全无关的触发模式。
+但请注意，`.left`，`.right` 和 `.middle` 这些修饰符名称是基于常见的右手用鼠标布局设定的，但实际上它们分别指代设备事件触发器的“主”、”次“，“辅助”，而非实际的物理按键。因此，对于左手用鼠标布局而言，“主”按键在物理上可能是右边的按键，但却会触发 `.left` 修饰符对应的处理程序。又或者，触控板可能通过单指点击触发 `.left` 处理程序，通过双指点击触发 `.right` 处理程序，通过三指点击触发 `.middle` 处理程序。同样，产生“鼠标”事件的其他设备和事件源，也可能具有与“左”，“右”完全无关的触发模式。
 
 <!-- zhlint disabled -->

src/guide/essentials/template-refs.md

@@ -148,7 +148,7 @@ onMounted(() => console.log(itemRefs.value))
 <details>
 <summary>3.5 前的用法</summary>
 
-In versions before 3.5 where `useTemplateRef()` was not introduced, we need to declare a ref with a name that matches the template ref attribute's value. The ref should also contain an array value:
+在 3.5 版本以前，`useTemplateRef()` 尚未引入，需要声明一个与模板引用 attribute 同名的 ref。该 ref 的值需要是一个数组。
 
 ```vue
 <script setup>

src/guide/extras/web-components.md

@@ -270,7 +270,7 @@ export function MyComponent() {
 }
 ```
 
-### 基于 Web Components 和 TypeScript {#web-components-and-typescript}
+### 基于 Vue 的 Web Components 和 TypeScript {#web-components-and-typescript}
 
 在编写 Vue SFC 模板时，你可能想要为你的 Vue 组件添加[类型检查](/guide/scaling-up/tooling.html#typescript)，包括那些被定义为自定义元素的组件。
 

src/guide/reusability/custom-directives.md

@@ -31,7 +31,7 @@ const vHighlight = {
 
 ```vue
 <script setup>
-// enables v-highlight in templates
+// 在模板中启用 v-highlight
 const vHighlight = {
   mounted: (el) => {
     el.classList.add('is-highlight')
@@ -55,7 +55,7 @@ const highlight = {
 
 export default {
   directives: {
-    // enables v-highlight in template
+    // 在模板中启用 v-highlight
     highlight
   }
 }
@@ -73,17 +73,17 @@ export default {
 
 <div class="composition-api">
 
-In `<script setup>`, any camelCase variable that starts with the `v` prefix can be used as a custom directive. In the example above, `vHighlight` can be used in the template as `v-highlight`.
+在 `<script setup>` 中，任何以 `v` 开头的驼峰式命名的变量都可以当作自定义指令使用。在上述例子中，`vHighlight` 可以在模板中以 `v-highlight`的形式使用。
 
-If you are not using `<script setup>`, custom directives can be registered using the `directives` option:
+在不使用 `<script setup>` 的情况下，自定义指令需要通过 `directives` 选项注册：
 
 ```js
 export default {
   setup() {
     /*...*/
   },
   directives: {
-    // enables v-highlight in template
+    // 在模板中启用 v-highlight
     highlight: {
       /* ... */
     }
@@ -95,26 +95,26 @@ export default {
 
 <div class="options-api">
 
-Similar to components, custom directives must be registered so that they can be used in templates. In the example above, we are using local registration via the `directives` option.
+和组件类似，自定义指令在模板中使用前必须先注册。在上面的例子中，我们使用 `directives` 选项完成了指令的局部注册。
 
 </div>
 
-It is also common to globally register custom directives at the app level:
+将一个自定义指令全局注册到应用层级也是一种常见的做法：
 
 ```js
 const app = createApp({})
 
-// make v-highlight usable in all components
+// 使 v-highlight 在所有组件中都可用
 app.directive('highlight', {
   /* ... */
 })
 ```
 
 ## When to use custom directives {#when-to-use}
 
-Custom directives should only be used when the desired functionality can only be achieved via direct DOM manipulation.
+只有当所需功能只能通过直接的 DOM 操作来实现时，才应该使用自定义指令。
 
-A common example of this is a `v-focus` custom directive that brings an element into focus.
+一个常见例子是使元素获取焦点的 `v-focus` 指令。
 
 <div class="composition-api">
 
@@ -156,7 +156,7 @@ export default {
 
 该指令比 `autofocus` 属性更有用，因为它不仅在页面加载时有效，而且在 Vue 动态插入元素时也有效！
 
-在可能的情况下，建议使用内置指令如 `v-bind` 进行声明式模板，因为它们更高效，对服务器渲染也更友好。
+建议尽可能使用 `v-bind` 等内置指令声明模板，因为它们更高效，对服务端渲染也更友好。
 
 ## 指令钩子 {#directive-hooks}
 

src/guide/reusability/plugins.md

@@ -136,6 +136,6 @@ export default {
 
 </div>
 
-### Bundle for NPM
+### 为 NPM 打包
 
-If you further want to build and publish your plugin for others to use, see [Vite's section on Library Mode](https://vitejs.dev/guide/build.html#library-mode).
+如果你想进一步打包并发布插件给他人使用，请参阅 [Vite 库模式](https://vitejs.dev/guide/build.html#library-mode)。

src/guide/scaling-up/testing.md

@@ -288,9 +288,9 @@ Vitest 和基于浏览器的运行器之间的主要区别是速度和执行上
 
 ### 推荐方案 {#recommendation-2}
 
-- [Playwright](https://playwright.dev/) 也是一个非常好的端到端测试解决方案，支持所有的现代渲染引擎，包括 Chromium、WebKit 和 Firefox。在 Windows、Linux 和 macOS 上进行本地或 CI 测试、无头测试，或使用适用于 Android 和 Mobile Safari 的 Google Chrome 的原生移动端模拟测试。它拥有信息丰富的用户界面、出色的调试能力、内置断言、并行处理功能以及追踪功能，旨在消除不稳定的测试。它还提供对[组件测试](https://docs.cypress.io/guides/component-testing/introduction)的支持，目前实验阶段。Playwright 由微软开源维护。
+- [Playwright](https://playwright.dev/) 是一个非常好的端到端测试解决方案，支持 Chromium、WebKit 和 Firefox。在 Windows、Linux 和 macOS 上进行本地或 CI 测试、无头测试，或使用适用于 Android 和 Mobile Safari 的 Google Chrome 的原生移动端模拟测试。它拥有信息丰富的用户界面、出色的调试能力、内置断言、并行处理功能以及追踪功能，旨在消除不稳定的测试。它还提供对[组件测试](https://docs.cypress.io/guides/component-testing/introduction)的支持，但目前处于实验阶段。Playwright 由微软开源并维护。
 
-- [Cypress](https://www.cypress.io/) 具有信息丰富的图形界面、出色的调试性、内置断言、存根、抗剥落性、并行化和快照等诸多特性。而且如上所述，它还提供对 [组件测试](https://docs.cypress.io/guides/component-testing/introduction) 的支持。它支持基于 Chromium 的浏览器、Firefox 和 Electron。但 WebKit 被标记为实验性支持。Cypress 采用 MIT 许可，但某些功能，如并行化，需要订阅 Cypress Cloud。
+- [Cypress](https://www.cypress.io/) 具有信息丰富的图形界面、出色的调试性、内置断言、存根、抗剥落性、并行化和快照等诸多特性。而且如上所述，它还提供对 [组件测试](https://docs.cypress.io/guides/component-testing/introduction) 的支持。它支持基于 Chromium 的浏览器、Firefox 和 Electron。但 WebKit 被标记为实验性支持。Cypress 采用 MIT 许可，但并行化等部分功能需要订阅 Cypress Cloud。
 
 <div class="lambdatest">
   <a href="https://lambdatest.com" target="_blank">