Skip to content

Commit 1efdcff

Browse files
authored
docs: update and supplement documentation (#946)
1 parent 14a014e commit 1efdcff

File tree

2 files changed

+59
-23
lines changed

2 files changed

+59
-23
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -403,6 +403,7 @@ app2.component('Bar', Bar) // equivalent to Vue.use('Bar', Bar)
403403

404404
### `createElement` / `h`
405405

406+
<details>
406407
<summary>
407408
⚠️ <code>createElement</code> / <code>h</code> workaround
408409
</summary>

README.zh-CN.md

Lines changed: 58 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -179,29 +179,6 @@ b.list[1].count === 1 // true
179179

180180
</details>
181181

182-
<details>
183-
<summary>
184-
⚠️ <code>set</code> 和 <code>del</code> 添加与刪除响应式属性变通方案
185-
</summary>
186-
187-
> ⚠️ 警告: `set``del` 并非 Vue 3 的一部分。由于 [Vue 2.x 响应式系统的限制](https://vuejs.org/v2/guide/reactivity.html#For-Objects),我们在插件中提供该 API 作为添加响应式属性的一个变通方案。在 Vue 3 中,你只需要直接为属性赋值即可。
188-
189-
```ts
190-
import { reactive, set, del } from '@vue/composition-api'
191-
192-
const a = reactive({
193-
foo: 1
194-
})
195-
196-
// 添加新的响应式属性
197-
set(a, 'bar', 1)
198-
199-
// 刪除属性并触发响应式更新
200-
del(a, 'bar')
201-
```
202-
203-
</details>
204-
205182
### 模板 Refs
206183

207184
<details>
@@ -366,6 +343,32 @@ declare module '@vue/composition-api' {
366343
367344
</details>
368345

346+
<details>
347+
<summary>
348+
⚠️ <code>set</code> 和 <code>del</code> 添加与刪除响应式属性变通方案
349+
</summary>
350+
351+
> ⚠️ 警告: `set``del` 并非 Vue 3 的一部分。由于 [Vue 2.x 响应式系统的限制](https://vuejs.org/v2/guide/reactivity.html#For-Objects), 我们在这里提供它们作为一种变通方案。
352+
> 在 Vue 2中,你将需要调用`set` 去追踪`object`上新的属性 (与`Vue.set`类似,但用于由 Composition API 创建的`reactive objects`)。在 Vue 3 中,你只需要像对待普通对象一样直接为属性赋值即可。
353+
>
354+
> 同样地, 在 Vue 2 中你将需要调用`del`[确保响应式对象中属性的删除将触发视图更新](https://vuejs.org/v2/api/#Vue-delete) (与`Vue.delete`类似,但用于由 Composition API 创建的`reactive objects`)。在Vue3中,你只需要通过调用 `delete foo.bar` 来删除它们。
355+
356+
```ts
357+
import { reactive, set, del } from '@vue/composition-api'
358+
359+
const a = reactive({
360+
foo: 1
361+
})
362+
363+
// 添加新的响应式属性
364+
set(a, 'bar', 1)
365+
366+
// 刪除属性并触发响应式更新
367+
del(a, 'bar')
368+
```
369+
370+
</details>
371+
369372
### Watch
370373

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

409412
</details>
410413

414+
### `createElement` / `h`
415+
416+
<details>
417+
<summary>
418+
⚠️ <code>createElement</code> / <code>h</code> 变通方案
419+
</summary>
420+
421+
<br>
422+
423+
在 Vue2中 `createElement` / `h` 只能通过 `render()` 函数访问。要在 `render()`之外使用它, 你可以显式地给它绑定一个组件实例。
424+
425+
> :warning: **警告**: 此功能是作为 Vue 2 的变通方法提供的,它不是 Vue 3 API 的一部分。
426+
427+
```jsx
428+
import { h as _h } from '@vue/composition-api'
429+
430+
export default {
431+
setup() {
432+
const vm = getCurrentInstance()
433+
const h = _h.bind(vm)
434+
435+
return () =>
436+
h('div', {
437+
ref: 'root',
438+
})
439+
},
440+
}
441+
```
442+
443+
</details>
444+
445+
411446
### `shallowReadonly`
412447

413448
<details>

0 commit comments

Comments
 (0)