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

Commit

Permalink
fix: fix all 'Proxy'
Browse files Browse the repository at this point in the history
  • Loading branch information
ShroXd committed Mar 1, 2021
1 parent 7c13779 commit 2711249
Showing 1 changed file with 13 additions and 13 deletions.
26 changes: 13 additions & 13 deletions src/api/basic-reactivity.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
const obj = reactive({ count: 0 })
```

响应式转换是“深层”的——它影响所有嵌套 property。在基于 [ES2015 Proxy](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 的实现中,返回的 Proxy****等于原始对象的。建议只使用响应式 Proxy,避免依赖原始对象。
响应式转换是“深层”的——它影响所有嵌套 property。在基于 [ES2015 Proxy](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 的实现中,返回的 proxy****等于原始对象的。建议只使用响应式 proxy,避免依赖原始对象。

**类型声明:**

Expand All @@ -20,7 +20,7 @@ function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

## `readonly`

接受一个对象 (响应式或纯对象) 或 [ref](./refs-api.html#ref) 并返回原始对象的只读 Proxy。只读 Proxy 是深层的:任何被访问的嵌套 property 也是只读的。
接受一个对象 (响应式或纯对象) 或 [ref](./refs-api.html#ref) 并返回原始对象的只读 proxy。只读 proxy 是深层的:任何被访问的嵌套 property 也是只读的。

```js
const original = reactive({ count: 0 })
Expand All @@ -41,11 +41,11 @@ copy.count++ // 警告!

## `isProxy`

检查对象是否是由 [`reactive`](#reactive) 或 [`readonly`](#readonly) 创建的 Proxy
检查对象是否是由 [`reactive`](#reactive) 或 [`readonly`](#readonly) 创建的 proxy

## `isReactive`

检查对象是否是由 [`reactive`](#reactive) 创建的响应式 Proxy
检查对象是否是由 [`reactive`](#reactive) 创建的响应式 proxy

```js
import { reactive, isReactive } from 'vue'
Expand All @@ -59,7 +59,7 @@ export default {
}
```

如果 Proxy 是 [`readonly`](#readonly) 创建的,但包装了由 [`reactive`](#reactive) 创建的另一个 Proxy,它也会返回 `true`
如果 proxy 是 [`readonly`](#readonly) 创建的,但包装了由 [`reactive`](#reactive) 创建的另一个 proxy,它也会返回 `true`

```js{7-15}
import { reactive, isReactive, readonly } from 'vue'
Expand All @@ -68,13 +68,13 @@ export default {
const state = reactive({
name: 'John'
})
// 从普通对象创建的只读 Proxy
// 从普通对象创建的只读 proxy
const plain = readonly({
name: 'Mary'
})
console.log(isReactive(plain)) // -> false
// 从响应式 Proxy 创建的只读 Proxy
// 从响应式 proxy 创建的只读 proxy
const stateCopy = readonly(state)
console.log(isReactive(stateCopy)) // -> true
}
Expand All @@ -83,11 +83,11 @@ export default {

## `isReadonly`

检查对象是否是由 [`readonly`](#readonly) 创建的只读 Proxy
检查对象是否是由 [`readonly`](#readonly) 创建的只读 proxy

## `toRaw`

返回 [`reactive`](#reactive) 或 [`readonly`](#readonly) Proxy 的原始对象。这是一个“逃生舱”,可用于临时读取数据而无需承担 Proxy 访问/跟踪开销,也可用于写入数据而避免触发更改。****建议保留对原始对象的持久引用。请谨慎使用。
返回 [`reactive`](#reactive) 或 [`readonly`](#readonly) proxy 的原始对象。这是一个“逃生舱”,可用于临时读取数据而无需承担 proxy 访问/跟踪开销,也可用于写入数据而避免触发更改。****建议保留对原始对象的持久引用。请谨慎使用。

```js
const foo = {}
Expand All @@ -98,7 +98,7 @@ console.log(toRaw(reactiveFoo) === foo) // true

## `markRaw`

标记一个对象,使其永远不会转换为 Proxy。返回对象本身。
标记一个对象,使其永远不会转换为 proxy。返回对象本身。

```js
const foo = markRaw({})
Expand All @@ -114,7 +114,7 @@ console.log(isReactive(bar.foo)) // false
`markRaw` 和下方的 shallowXXX API 使你可以有选择地退出默认的深度响应式/只读转换模式,并将原始的,未被代理的对象嵌入状态图中。它们可以根据情况灵活运用:

- 有些值不应该是响应式的,例如复杂的第三方类实例或 Vue 组件对象。
- 当渲染具有不可变数据源的大列表时,跳过 Proxy 转换可以提高性能。
- 当渲染具有不可变数据源的大列表时,跳过 proxy 转换可以提高性能。

这些例子是进阶的运用,因为原始选择退出仅在根级别,因此,如果将嵌套在内的、未标记的原始对象添加进响应式对象,然后再次访问该响应式对象,就会得到原始对象被代理后的版本。这可能会导致**同一性风险**——即执行一个依赖于对象本身的操作,但同时使用同一对象的原始版本和被代理后的版本:

Expand All @@ -137,7 +137,7 @@ console.log(foo.nested === bar.nested) // false

## `shallowReactive`

创建一个响应式 Proxy,它跟踪其自身 property 的响应性,但不执行嵌套对象的深层响应式转换 (暴露原始值)。
创建一个响应式 proxy,它跟踪其自身 property 的响应性,但不执行嵌套对象的深层响应式转换 (暴露原始值)。

```js
const state = shallowReactive({
Expand All @@ -156,7 +156,7 @@ state.nested.bar++ // 非响应式

## `shallowReadonly`

创建一个 Proxy,使其自身的 property 为只读,但不执行嵌套对象的深度只读转换 (暴露原始值)。
创建一个 proxy,使其自身的 property 为只读,但不执行嵌套对象的深度只读转换 (暴露原始值)。

```js
const state = shallowReadonly({
Expand Down

0 comments on commit 2711249

Please sign in to comment.