Skip to content

Commit ab84422

Browse files
authored
docs: update Angular Signals reactivity comparison (#2702)
1 parent 7a3ec37 commit ab84422

File tree

1 file changed

+3
-13
lines changed

1 file changed

+3
-13
lines changed

src/guide/extras/reactivity-in-depth.md

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -403,7 +403,7 @@ export function useMachine(options) {
403403
Quite a few other frameworks have introduced reactivity primitives similar to refs from Vue's Composition API, under the term "signals":
404404

405405
- [Solid Signals](https://www.solidjs.com/docs/latest/api#createsignal)
406-
- [Angular Signals](https://github.com/angular/angular/discussions/49090)
406+
- [Angular Signals](https://angular.io/guide/signals)
407407
- [Preact Signals](https://preactjs.com/guide/v10/signals/)
408408
- [Qwik Signals](https://qwik.builder.io/docs/components/state/#usesignal)
409409

@@ -454,18 +454,12 @@ const count = signal(0)
454454
count() // access the value
455455
count.set(1) // set new value
456456
count.update((v) => v + 1) // update based on previous value
457-
458-
// mutate deep objects with same identity
459-
const state = signal({ count: 0 })
460-
state.mutate((o) => {
461-
o.count++
462-
})
463457
```
464458
465459
Again, we can easily replicate the API in Vue:
466460
467461
```js
468-
import { shallowRef, triggerRef } from 'vue'
462+
import { shallowRef } from 'vue'
469463

470464
export function signal(initialValue) {
471465
const r = shallowRef(initialValue)
@@ -476,15 +470,11 @@ export function signal(initialValue) {
476470
s.update = (updater) => {
477471
r.value = updater(r.value)
478472
}
479-
s.mutate = (mutator) => {
480-
mutator(r.value)
481-
triggerRef(r)
482-
}
483473
return s
484474
}
485475
```
486476
487-
[Try it in the Playground](https://play.vuejs.org/#eNp9UslOwzAQ/ZVRLiRQEsqxpBUIvoADp0goTd3U4DiWl4AU5d8ZL3E3iZtn5r1Z3vOYvAiRD4Ykq6RUjaRCgyLaiE3FaSd6qWEERVteswU0fSeMJjuYYC/7Dm7youatYbW895D8S91UvOJNz5VGuOEa1oGePmRzYdebLSNYmRumaQbrjSfg8xYeEVsWfh/cBANNOsFqTTACKA/LzavrTtUKxjEyp6kssDZj3vygAPJjL1Bbo3XP4blhtPleV4nrlBuxw1npYLca4A6WWZU4PADljSQd4drRC8//rxfKaW+f+ZJg4oJbFvG8ZJFcaYreHL041Iz1P+9kvwAtadsS6d7Rm1rB55VRaLAzhvy6NnvDG01x1WAN5VTTmn3UzJAMRrudd0pa++LEc9wRpRDlHZT5YGu2pOzhWHAJWxvnakxOHufFxqx/4MxzcEinIYP+eV5ntOe5Rx94IYjopxOZUhnIEr+4xPMrjuG1LPFftkTj5DNJGhwYBZ4BJz3DV56FmJLpD1DrKXU=)
477+
[Try it in the Playground](https://play.vuejs.org/#eNp9Ul1v0zAU/SuWX9ZCSRh7m9IKGHuAB0AD8WQJZclt6s2xLX+ESlH+O9d2krbr1Df7nnPu17k9/aR11nmgt7SwleHaEQvO6w2TvNXKONITyxtZihWpVKu9g5oMZGtUS66yvJSNF6V5lyjZk71ikslKSeuQ7qUj61G+eL+cgFr5RwGITAkXiyVZb5IAn2/IB+QWeeoHO8GPg1aL0gH+CCl215u7mJ3bW9L3s3IYihyxifMlFRpJqewL1qN3TknysRK8el4zGjNlXtdYa9GFrjryllwvGY18QrisDLQgXZTnSX8pF64zzD7pDWDghbbI5/Hoip7tFL05eLErhVD/HmB75Edpyd8zc9DUaAbso3TrZeU4tjfawSV3vBR/SuFhSfrQUXLHBMvmKqe8A8siK7lmsi5gAbJhWARiIGD9hM7BIfHSgjGaHljzlDyGF2MEPQs6g5dpcAIm8Xs+2XxODTgUn0xVYdJ5RxPhKOd4gdMsA/rgLEq3vEEHlEQPYrbgaqu5APNDh6KWUTyuZC2jcWvfYswZD6spXu2gen4l/mT3Icboz3AWpgNGZ8yVBttM8P2v77DH9wy2qvYC2RfAB7BK+NBjon32ssa2j3ix26/xsrhsftv7vQNpp6FCo4E5RD6jeE93F0Y/tHuT3URd2OLwHyXleRY=)
488478
489479
Compared to Vue refs, Solid and Angular's getter-based API style provide some interesting trade-offs when used in Vue components:
490480

0 commit comments

Comments
 (0)