Skip to content
This repository was archived by the owner on Aug 8, 2022. It is now read-only.

Translated some new content in src/api/ #648

Merged
merged 3 commits into from
Aug 21, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 12 additions & 13 deletions src/api/effect-scope.md
Original file line number Diff line number Diff line change
@@ -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()
Expand All @@ -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
Expand Down
21 changes: 10 additions & 11 deletions src/api/global-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/api/reactivity-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
2 changes: 1 addition & 1 deletion src/api/sfc-spec.md
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
2 changes: 1 addition & 1 deletion src/api/sfc-tooling.md
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
2 changes: 1 addition & 1 deletion src/guide/web-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down