Skip to content

Commit 23de15c

Browse files
authored
docs: moving set and del warning to the reactive block (#793)
1 parent 59653ac commit 23de15c

File tree

1 file changed

+27
-27
lines changed

1 file changed

+27
-27
lines changed

README.md

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -181,33 +181,6 @@ a.list[1].count === 1 // true
181181

182182
</details>
183183

184-
<details>
185-
<summary>
186-
⚠️ <code>set</code> and <code>del</code> workaround for adding and deleting reactive properties
187-
</summary>
188-
189-
> ⚠️ Warning: `set` and `del` do NOT exist in Vue 3. We provide them as a workaround here, due to the limitation of [Vue 2.x reactivity system](https://vuejs.org/v2/guide/reactivity.html#For-Objects).
190-
>
191-
> In Vue 2, you will need to call `set` to track new keys on an `object`(similar to `Vue.set` but for `reactive objects` created by the Composition API). In Vue 3, you can just assign them like normal objects.
192-
>
193-
> Similarly, in Vue 2 you will need to call `del` to [ensure a key deletion triggers view updates](https://vuejs.org/v2/api/#Vue-delete) in reactive objects (similar to `Vue.delete` but for `reactive objects` created by the Composition API). In Vue 3 you can just delete them by calling `delete foo.bar`.
194-
195-
```ts
196-
import { reactive, set } from '@vue/composition-api'
197-
198-
const a = reactive({
199-
foo: 1
200-
})
201-
202-
// add new reactive key
203-
set(a, 'bar', 1)
204-
205-
// remove a key and trigger reactivity
206-
del(a, 'bar')
207-
```
208-
209-
</details>
210-
211184
### Template Refs
212185

213186
<details>
@@ -362,6 +335,33 @@ export default {
362335
363336
</details>
364337

338+
<details>
339+
<summary>
340+
⚠️ <code>set</code> and <code>del</code> workaround for adding and deleting reactive properties
341+
</summary>
342+
343+
> ⚠️ Warning: `set` and `del` do NOT exist in Vue 3. We provide them as a workaround here, due to the limitation of [Vue 2.x reactivity system](https://vuejs.org/v2/guide/reactivity.html#For-Objects).
344+
>
345+
> In Vue 2, you will need to call `set` to track new keys on an `object`(similar to `Vue.set` but for `reactive objects` created by the Composition API). In Vue 3, you can just assign them like normal objects.
346+
>
347+
> Similarly, in Vue 2 you will need to call `del` to [ensure a key deletion triggers view updates](https://vuejs.org/v2/api/#Vue-delete) in reactive objects (similar to `Vue.delete` but for `reactive objects` created by the Composition API). In Vue 3 you can just delete them by calling `delete foo.bar`.
348+
349+
```ts
350+
import { reactive, set } from '@vue/composition-api'
351+
352+
const a = reactive({
353+
foo: 1
354+
})
355+
356+
// add new reactive key
357+
set(a, 'bar', 1)
358+
359+
// remove a key and trigger reactivity
360+
del(a, 'bar')
361+
```
362+
363+
</details>
364+
365365
### Watch
366366

367367
<details>

0 commit comments

Comments
 (0)