Skip to content

Commit

Permalink
docs: update and supplement documentation (#946)
Browse files Browse the repository at this point in the history
  • Loading branch information
leafstark committed Jun 25, 2022
1 parent 14a014e commit 1efdcff
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 23 deletions.
1 change: 1 addition & 0 deletions README.md
Expand Up @@ -403,6 +403,7 @@ app2.component('Bar', Bar) // equivalent to Vue.use('Bar', Bar)

### `createElement` / `h`

<details>
<summary>
⚠️ <code>createElement</code> / <code>h</code> workaround
</summary>
Expand Down
81 changes: 58 additions & 23 deletions README.zh-CN.md
Expand Up @@ -179,29 +179,6 @@ b.list[1].count === 1 // true

</details>

<details>
<summary>
⚠️ <code>set</code> 和 <code>del</code> 添加与刪除响应式属性变通方案
</summary>

> ⚠️ 警告: `set``del` 并非 Vue 3 的一部分。由于 [Vue 2.x 响应式系统的限制](https://vuejs.org/v2/guide/reactivity.html#For-Objects),我们在插件中提供该 API 作为添加响应式属性的一个变通方案。在 Vue 3 中,你只需要直接为属性赋值即可。
```ts
import { reactive, set, del } from '@vue/composition-api'

const a = reactive({
foo: 1
})

// 添加新的响应式属性
set(a, 'bar', 1)

// 刪除属性并触发响应式更新
del(a, 'bar')
```

</details>

### 模板 Refs

<details>
Expand Down Expand Up @@ -366,6 +343,32 @@ declare module '@vue/composition-api' {
</details>

<details>
<summary>
⚠️ <code>set</code> 和 <code>del</code> 添加与刪除响应式属性变通方案
</summary>

> ⚠️ 警告: `set``del` 并非 Vue 3 的一部分。由于 [Vue 2.x 响应式系统的限制](https://vuejs.org/v2/guide/reactivity.html#For-Objects), 我们在这里提供它们作为一种变通方案。
> 在 Vue 2中,你将需要调用`set` 去追踪`object`上新的属性 (与`Vue.set`类似,但用于由 Composition API 创建的`reactive objects`)。在 Vue 3 中,你只需要像对待普通对象一样直接为属性赋值即可。
>
> 同样地, 在 Vue 2 中你将需要调用`del`[确保响应式对象中属性的删除将触发视图更新](https://vuejs.org/v2/api/#Vue-delete) (与`Vue.delete`类似,但用于由 Composition API 创建的`reactive objects`)。在Vue3中,你只需要通过调用 `delete foo.bar` 来删除它们。
```ts
import { reactive, set, del } from '@vue/composition-api'

const a = reactive({
foo: 1
})

// 添加新的响应式属性
set(a, 'bar', 1)

// 刪除属性并触发响应式更新
del(a, 'bar')
```

</details>

### Watch

<details>
Expand Down Expand Up @@ -408,6 +411,38 @@ app2.component('Bar', Bar) // 相当于 Vue.use('Bar', Bar)

</details>

### `createElement` / `h`

<details>
<summary>
⚠️ <code>createElement</code> / <code>h</code> 变通方案
</summary>

<br>

在 Vue2中 `createElement` / `h` 只能通过 `render()` 函数访问。要在 `render()`之外使用它, 你可以显式地给它绑定一个组件实例。

> :warning: **警告**: 此功能是作为 Vue 2 的变通方法提供的,它不是 Vue 3 API 的一部分。
```jsx
import { h as _h } from '@vue/composition-api'

export default {
setup() {
const vm = getCurrentInstance()
const h = _h.bind(vm)

return () =>
h('div', {
ref: 'root',
})
},
}
```

</details>


### `shallowReadonly`

<details>
Expand Down

0 comments on commit 1efdcff

Please sign in to comment.