[lcrz]

Vue has `refs`, which are reactive proxy objects that are used for tracking things like re-rendering.

Since vue does not hide the fact that something is a ref, you need to call `myRef.value` to get to the underlying value of `const myRef = ref(10)`.

In a new and currently experimental syntax, you can use `const myRef = $ref(10)`, at which point you can just use `myRef` directly. This will then be converted by the Vue SFC compiler.

Another option is to use a reactive object as the state: `const state = reactive({ myVal: 10 })`, at which point you can just use `state.myVal`.

[b0afc375b5]

> In a new and currently experimental syntax, you can use `const myRef = $ref(10)`,

Oh sweet didn't know that. I keep forgetting to type `.value` and debugging it wastes a couple of seconds here and there.

https://vuejs.org/guide/extras/reactivity-transform.html#ref...

[oefrha]

Huh, I forgot reactivity transform is already out! Meant to try it but didn't get the chance. Good thing I happen to be starting a new project today.

[solardev]

What is the `10` here? Is it a reference to the literal value `10`...?

[rk06]

It is just an initial value.

[solardev]

So ref is just a state variable with an initial value of 10? How do you mutate the variable/change the state?

[rk06]

No, $ref(10) will return a reactive object. And 10 will be the initial value of that object.

You use the object the same way you use a js variable.

let st = $ref(10)

st = st + 1 // update it and use it like if it was just "10"

But now, st is reactive.

[solardev]

Thank you for the explanation... I will have to learn a lot of basics, it looks like :)