diff --git a/README.md b/README.md index fc5e006..053632b 100644 --- a/README.md +++ b/README.md @@ -403,6 +403,7 @@ app2.component('Bar', Bar) // equivalent to Vue.use('Bar', Bar) ### `createElement` / `h` +
⚠️ createElement / h workaround diff --git a/README.zh-CN.md b/README.zh-CN.md index 8345d60..b9201fc 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -179,29 +179,6 @@ b.list[1].count === 1 // true
-
- -⚠️ setdel 添加与刪除响应式属性变通方案 - - -> ⚠️ 警告: `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') -``` - -
- ### 模板 Refs
@@ -366,6 +343,32 @@ declare module '@vue/composition-api' {
+
+ +⚠️ setdel 添加与刪除响应式属性变通方案 + + +> ⚠️ 警告: `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') +``` + +
+ ### Watch
@@ -408,6 +411,38 @@ app2.component('Bar', Bar) // 相当于 Vue.use('Bar', Bar)
+### `createElement` / `h` + +
+ +⚠️ createElement / h 变通方案 + + +
+ +在 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', + }) + }, +} +``` + +
+ + ### `shallowReadonly`