5 ms·
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,
by lcrz 4y ago
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 4y ago> 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#refs-vs-reactive-variables https://vuejs.org/guide/extras/reactivity-transform.html#ref...
- oefrha 4y agoHuh, 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 4y agoWhat is the `10` here? Is it a reference to the literal value `10`...?
- rk06 4y agoIt is just an initial value.
- solardev 4y agoSo ref is just a state variable with an initial value of 10? How do you mutate the variable/change the state?
- rk06 4y agoNo, $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 4y agoThank you for the explanation... I will have to learn a lot of basics, it looks like :)