Translated some new content in src/api/ (#648)

* Translated some new content in src/api/

* Updated the translation of effect scope

* Apply suggestions from code review

Co-authored-by: Godpu <[email protected]>

Co-authored-by: Godpu <[email protected]>

Author: Jinjiang

src/api/effect-scope.md

@@ -1,26 +1,25 @@
-<!-- TODO: translation -->
-# Effect Scope API <Badge text="3.2+" />
+# Effect 作用域 API <Badge text="3.2+" />
 
 :::info
-Effect scope is an advanced API primarily intended for library authors. For details on how to leverage this API, please consult its corresponding [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md).
+Effect 作用域是一个高阶的 API，主要服务于库作者。关于其使用细节请咨询相应的 [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md)。
 :::
 
 ## `effectScope`
 
-Creates an effect scope object which can capture the reactive effects (e.g. computed and watchers) created within it so that these effects can be disposed together.
+创建一个 effect 作用域对象，以捕获在其内部创建的响应式 effect (例如计算属性或侦听器)，使得这些 effect 可以一起被处理。
 
-**Typing:**
+**类型**：
 
 ```ts
 function effectScope(detached?: boolean): EffectScope
 
 interface EffectScope {
-  run<T>(fn: () => T): T | undefined // undefined if scope is inactive
+  run<T>(fn: () => T): T | undefined // 如果这个域不活跃则为 undefined
   stop(): void
 }
 ```
 
-**Example:**
+**示例**：
 
 ```js
 const scope = effectScope()
@@ -33,27 +32,27 @@ scope.run(() => {
   watchEffect(() => console.log('Count: ', doubled.value))
 })
 
-// to dispose all effects in the scope
+// 处理该作用域内的所有 effect
 scope.stop()
 ```
 
 ## `getCurrentScope`
 
-Returns the current active [effect scope](#effectscope) if there is one.
+如果有，则返回当前活跃的 [effect 作用域](#effectscope)。
 
-**Typing:**
+**类型**：
 
 ```ts
 function getCurrentScope(): EffectScope | undefined
 ```
 
 ## `onScopeDispose`
 
-Registers a dispose callback on the current active [effect scope](#effectscope). The callback will be invoked when the associated effect scope is stopped.
+在当前活跃的 [effect 作用域](#effectscope)上注册一个处理回调。该回调会在相关的 effect 作用域结束之后被调用。
 
-This method can be used as a non-component-coupled replacement of `onUnmounted` in reusable composition functions, since each Vue component's `setup()` function is also invoked in an effect scope.
+该方法在复用组合式函数时可用作 `onUmounted` 的非组件耦合替代品，因为每个 Vue 组件的 `setup()` 函数也同样在 effect 作用域内被调用。
 
-**Typing:**
+**类型**：
 
 ```ts
 function onScopeDispose(fn: () => void): void

src/api/global-api.md

@@ -235,12 +235,11 @@ const AsyncComp = defineAsyncComponent({
 
 **参考**：[动态和异步组件](../guide/component-dynamic-async.html)
 
-<!-- TODO: translation -->
 ## defineCustomElement <Badge text="3.2+" />
 
-This method accepts the same argument as [`defineComponent`](#definecomponent), but instead returns a native [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) that can be used within any framework, or with no frameworks at all.
+该方法接受和 [`defineComponent`](#definecomponent) 相同的参数，但是返回一个原生的[自定义元素](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_custom_elements)，该元素可以用于任意框架或不基于框架使用。
 
-Usage example:
+用法示例：
 
 ```html
 <my-vue-element></my-vue-element>
@@ -249,26 +248,26 @@ Usage example:
 ```js
 import { defineCustomElement } from 'vue'
 const MyVueElement = defineCustomElement({
-  // normal Vue component options here
+  // 这里是普通的 Vue 组件选项
   props: {},
   emits: {},
   template: `...`,
-  // defineCustomElement only: CSS to be injected into shadow root
+  // 只用于 defineCustomElement：注入到 shadow root 中的 CSS
   styles: [`/* inlined css */`]
 })
-// Register the custom element.
-// After registration, all `<my-vue-element>` tags on the page will be upgraded.
+// 注册该自定义元素。
+// 注册过后，页面上所有的 `<my-vue-element>` 标记会被升级。
 customElements.define('my-vue-element', MyVueElement)
-// You can also programmatically instantiate the element:
-// (can only be done after registration)
+// 你也可以用编程的方式初始化这个元素：
+// (在注册之后才可以这样做)
 document.body.appendChild(
   new MyVueElement({
-    // initial props (optional)
+    // 初始化的 prop (可选)
   })
 )
 ```
 
-For more details on building Web Components with Vue, especially with Single File Components, see [Vue and Web Components](/guide/web-components.html#building-custom-elements-with-vue).
+关于使用 Vue，尤其是通过单文件组件构建 Web Components 的更多细节，请查阅[Vue 和 Web Components](/guide/web-components.html#使用-Vue-构建自定义元素)。
 
 ## resolveComponent
 

src/api/reactivity-api.md

@@ -5,4 +5,4 @@
 - [响应性基础 API](/api/basic-reactivity.html)
 - [Refs](/api/refs-api.html)
 - [Computed 与 watch](/api/computed-watch-api.html)
-- [Effect Scope API](/api/effect-scope.html)<!-- TODO: translation -->
+- [Effect 作用域 API](/api/effect-scope.html)

src/api/sfc-spec.md

@@ -1,6 +1,6 @@
-<!-- TODO: translation -->
 # SFC Syntax Specification
 
+<!-- TODO: translation -->
 ## Intro
 
 A `*.vue` file is a custom file format that uses HTML-like syntax to describe a Vue component. Each `*.vue` file consists of three types of top-level language blocks: `<template>`, `<script>`, and `<style>`, and optionally additional custom blocks:

src/api/sfc-tooling.md

@@ -1,6 +1,6 @@
-<!-- TODO: translation -->
 # SFC Tooling
 
+<!-- TODO: translation -->
 ## Online Playgrounds
 
 You don't need to install anything on your machine to try out Vue SFCs - there are many online playgrounds that allow you to do so right in the browser:

src/guide/web-components.md

@@ -5,7 +5,7 @@
 
 We consider Vue and Web Components to be primarily complementary technologies. Vue has excellent support for both consuming and creating custom elements. Whether you are integrating custom elements into an existing Vue application, or using Vue to build and distribute custom elements, you are in good company.
 
-## Using Custom Elements in Vue
+## 使用 Vue 构建自定义元素
 
 Vue [scores a perfect 100% in the Custom Elements Everywhere tests](https://custom-elements-everywhere.com/libraries/vue/results/results.html). Consuming custom elements inside a Vue application largely works the same as using native HTML elements, with a few things to keep in mind: