Isn't this part of the motivation of the expose API? Previously, if you tried to destructure an object that was a ref, the destructured variables would lose their reactivity. Designed with by Just to reiterate, the Composition API merges the concept of reactive data via ref with the concept of template refs. Suggestions cannot be applied on multi-line comments. This means we can use our variables without appending .value everywhere. 3APIreturn. Just to reiterate, the Composition API merges the concept of reactive data via ref with the concept of template refs. The ref overhead of whether to use .value or not makes me E. I personally like it, it's just syntactic sugar for const somePrimitive = reactive({ value: 123 }); . Code. If you do the latter, you have to go back and s/foo.value/state.foo throughout your setup function and s/foo/state.foo in your template. let name = 'John Doe' Here's how we get its value: console.log (name) Then to set its value: name = 'John Wick' It might be more simple than you think! It's about the child, if $refs.foo is a component that uses expose then the parent can't access its $el. Your email address will not be published. // By wrapping our default value (true) with a ref, we tell Vue to keep track of changes made to it, // prints an object that represents the ref object that wraps isReading, // This is how you would need to access the value of isReading, // Prepending $ to ref makes $ref() a macro that wraps around the original ref(), // Vue will be able to tell when any part of `reader` changes, // Vue won't be able to tell when the values of `name` and `timeOnpage` change, // Vue will now be able to tell when the values of `name` and `timeOnpage` change, // This is what we want - the isReading variable should be passed as a ref, /// . Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Again! Refs in the setup function work differently then refs in the rest of Vue. Instead, we have to use a generic argument. to your account. The whole composition API ignores all the goodies of ES6. This may be useful when you want to, for example, programmatically focus an input on component mount, or initialize a 3rd party library on an element. Is there any? By rejecting non-essential cookies, Reddit may still use certain cookies to ensure the proper functionality of our platform. Better reactivity. I totally agree. Subscribe to receive all the articles we publish in a concise format, perfect for In this article, well look at how to create Vue 3 apps with the Composition API. I suppose we would need some kind of TS plugin that can be plugged into the compilation. e.g. To do that, we specify the type (s) inside a pair of open-and-close <> (angle brackets) before the parentheses. Sadly MS doesn't seem to want to open up plugin for compilation yet, although most TS loaders give you a backdoor for that, and there exists tsc wrappers. Then we can assign it in the template to the element or component we want. Introducing Components. Learn this simple technique on how to do it using the new Composition API and make it easy. First, we'll take a look at ref. Interesting. @Justineo 's idea of exposing expose via setup context works in