Personally, <script setup> has me ready to actually use the Composition API. Before it felt like the ROI wasn't enough for my small-ish projects.
However, the new style makes it much simpler than the "normal" Composition API and the Options API.
Mainly because of the simpler mental model: Top level bindings are exposed to template
Instead of interacting layers and such, you can think of the <template> simply as a special computed property within the setup function, that updates whenever its dependencies change (not quite what happens, but you get the picture):
It is important to notice the different template scoping mental model vs. Options API: when using Options API, the <script> and the template are connected via a "render context object"...
When using <script setup>, however, the mental model is simply that of a function inside another function: the inner function has access to everything in the parent scope.
Also, I get very tired of importing the components I want and then registering them in the script. It feels like needless repetition to type the components out twice. I mean, come on, how many times have you imported a component but not registered it :)? So for me, the "auto-registration" when using <script setup> is really useful.
I realized I didn't have much of a solid mental model at all for the Options API. The values of certain properties of the default-exported object were accessible via this, and the template could magically use properties on this without actually using this. But that was about it.
Also, the template still felt a bit too disconnected.
One more thing that I really like is that you can define the props that the component takes using a Typescript interface. This is far, far easier than nested objects with special keys.
Just my opinions after looking into it*, I haven't used it yet.
Update: I re-read the Vue guide on the Composition API and I finally have grokked it properly (I had read it before but never fully "got" it). Now I can compare the two ways better, and I still much prefer the <script setup> syntax.
* I have read almost all the comments on all the main RFCs about this and related stuff.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Personally,
<script setup>has me ready to actually use the Composition API. Before it felt like the ROI wasn't enough for my small-ish projects.However, the new style makes it much simpler than the "normal" Composition API and the Options API.
Mainly because of the simpler mental model: Top level bindings are exposed to template
Instead of interacting layers and such, you can think of the
<template>simply as a special computed property within the setup function, that updates whenever its dependencies change (not quite what happens, but you get the picture):Also, I get very tired of importing the components I want and then registering them in the script. It feels like needless repetition to type the components out twice. I mean, come on, how many times have you imported a component but not registered it :)? So for me, the "auto-registration" when using
<script setup>is really useful.I realized I didn't have much of a solid mental model at all for the Options API. The values of certain properties of the default-exported object were accessible via
this, and the template could magically use properties onthiswithout actually usingthis. But that was about it.Also, the template still felt a bit too disconnected.
One more thing that I really like is that you can define the props that the component takes using a Typescript interface. This is far, far easier than nested objects with special keys.
Just my opinions after looking into it*, I haven't used it yet.
Update: I re-read the Vue guide on the Composition API and I finally have grokked it properly (I had read it before but never fully "got" it). Now I can compare the two ways better, and I still much prefer the
<script setup>syntax.* I have read almost all the comments on all the main RFCs about this and related stuff.