Skip to content

Commit 55fafe7

Browse files
committed
update section on runtime vs compile time reactivity
1 parent f64cf09 commit 55fafe7

File tree

1 file changed

+3
-16
lines changed

1 file changed

+3
-16
lines changed

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

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -208,24 +208,11 @@ The `ref()`, `computed()` and `watchEffect()` APIs are all part of the Compositi
208208

209209
## Runtime vs. Compile-time Reactivity {#runtime-vs-compile-time-reactivity}
210210

211-
Vue's reactivity system is primarily runtime-based: the tracking and triggering are all performed while the code is running directly in the browser. The pros of runtime reactivity are that it can work without a build step, and there are fewer edge cases. On the other hand, this makes it constrained by the syntax limitations of JavaScript.
211+
Vue's reactivity system is primarily runtime-based: the tracking and triggering are all performed while the code is running directly in the browser. The pros of runtime reactivity are that it can work without a build step, and there are fewer edge cases. On the other hand, this makes it constrained by the syntax limitations of JavaScript, leading to the need of value containers like Vue refs.
212212

213-
We have already encountered a limitation in the previous example: JavaScript does not provide a way for us to intercept the reading and writing of local variables, so we have to always access reactive state as object properties, using either reactive objects or refs.
213+
Some frameworks, such as [Svelte](https://svelte.dev/), choose to overcome such limitations by implementing reactivity during compilation. It analyzes and transforms the code in order to simulate reactivity. The compilation step allows the framework to alter the semantics of JavaScript itself - for example, implicitly injecting code that performs dependency analysis and effect triggering around access to locally defined variables. The downside is that such transforms require a build step, and altering JavaScript semantics is essentially creating a language that looks like JavaScript but compiles into something else.
214214

215-
We have been experimenting with the [Reactivity Transform](/guide/extras/reactivity-transform.html) feature to reduce the code verbosity:
216-
217-
```js
218-
let A0 = $ref(0)
219-
let A1 = $ref(1)
220-
221-
// track on variable read
222-
const A2 = $computed(() => A0 + A1)
223-
224-
// trigger on variable write
225-
A0 = 2
226-
```
227-
228-
This snippet compiles into exactly what we'd have written without the transform, by automatically appending `.value` after references to the variables. With Reactivity Transform, Vue's reactivity system becomes a hybrid one.
215+
The Vue team did explore this direction via an experimental feature called [Reactivity Transform](/guide/extras/reactivity-transform.html), but in the end we have decided that it would not be a good fit for the project due to [the reasoning here](https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028).
229216

230217
## Reactivity Debugging {#reactivity-debugging}
231218

0 commit comments

Comments
 (0)