From 4521aa051b0f6626dfa08d6a9bde775970c18ed5 Mon Sep 17 00:00:00 2001 From: Lukas Matta Date: Wed, 14 Feb 2024 14:42:18 +0100 Subject: [PATCH] docs: update Angular Signals reactivity comparison --- src/guide/extras/reactivity-in-depth.md | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md index 5d3801ca0f..5038ee9ab8 100644 --- a/src/guide/extras/reactivity-in-depth.md +++ b/src/guide/extras/reactivity-in-depth.md @@ -403,7 +403,7 @@ export function useMachine(options) { Quite a few other frameworks have introduced reactivity primitives similar to refs from Vue's Composition API, under the term "signals": - [Solid Signals](https://www.solidjs.com/docs/latest/api#createsignal) -- [Angular Signals](https://github.com/angular/angular/discussions/49090) +- [Angular Signals](https://angular.io/guide/signals) - [Preact Signals](https://preactjs.com/guide/v10/signals/) - [Qwik Signals](https://qwik.builder.io/docs/components/state/#usesignal) @@ -454,18 +454,12 @@ const count = signal(0) count() // access the value count.set(1) // set new value count.update((v) => v + 1) // update based on previous value - -// mutate deep objects with same identity -const state = signal({ count: 0 }) -state.mutate((o) => { - o.count++ -}) ``` Again, we can easily replicate the API in Vue: ```js -import { shallowRef, triggerRef } from 'vue' +import { shallowRef } from 'vue' export function signal(initialValue) { const r = shallowRef(initialValue) @@ -476,15 +470,11 @@ export function signal(initialValue) { s.update = (updater) => { r.value = updater(r.value) } - s.mutate = (mutator) => { - mutator(r.value) - triggerRef(r) - } return s } ``` -[Try it in the Playground](https://play.vuejs.org/#eNp9UslOwzAQ/ZVRLiRQEsqxpBUIvoADp0goTd3U4DiWl4AU5d8ZL3E3iZtn5r1Z3vOYvAiRD4Ykq6RUjaRCgyLaiE3FaSd6qWEERVteswU0fSeMJjuYYC/7Dm7youatYbW895D8S91UvOJNz5VGuOEa1oGePmRzYdebLSNYmRumaQbrjSfg8xYeEVsWfh/cBANNOsFqTTACKA/LzavrTtUKxjEyp6kssDZj3vygAPJjL1Bbo3XP4blhtPleV4nrlBuxw1npYLca4A6WWZU4PADljSQd4drRC8//rxfKaW+f+ZJg4oJbFvG8ZJFcaYreHL041Iz1P+9kvwAtadsS6d7Rm1rB55VRaLAzhvy6NnvDG01x1WAN5VTTmn3UzJAMRrudd0pa++LEc9wRpRDlHZT5YGu2pOzhWHAJWxvnakxOHufFxqx/4MxzcEinIYP+eV5ntOe5Rx94IYjopxOZUhnIEr+4xPMrjuG1LPFftkTj5DNJGhwYBZ4BJz3DV56FmJLpD1DrKXU=) +[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=) Compared to Vue refs, Solid and Angular's getter-based API style provide some interesting trade-offs when used in Vue components: