https://vuejs.org/guide/extras/composition-api-faq.html I'm reading on the differences between the composition api and legacy options api with vue 3. I've been confused on when I should use the setup function and the props option over the script setup and defineProps. From what I've read on the faq, " Yes. You can use Composition API via the setup() option in an Options API component.
However, we only recommend doing so if you have an existing Options API codebase that needs to integrate with new features / external libraries written with Composition API. "
So to be pedantic and asking for correctness, is using the setup function using options api?
If you were to start a new vue 3 project, would you use <script setup> in every component?
Is there ever a reason to not use <script setup>?
So far I have been using the setup function with the props options and I think the code plays nice and is readable, but I'm thinking this is not the correct way of going about things. Should I make evreything <script setup> and remove the setup function?
CodePudding user response：
So to be pedantic and asking for correctness, is using the setup function using options api?
Options API isn't identical to script block. Options API stands for component options that were replaced with composition API, namely data, methods, computed, watch, mixins.
If you were to start a new vue 3 project, would you use in every component? Is there ever a reason to not use ?
This is subjective, but there are reasons to avoid this.
script setup is DSL and not spec-compliant JavaScript. It's not transparent and not thoroughly documented, a considerable amount of the problems that are related to this syntax come from that the developers aren't fully aware of what code is doing, this can be confirmed only by debugging the compiled JavaScript code. This adds to a similar problem to template DSL, except that the latter is well-documented and there are other reasons for it to exists besides that it allows to write less code.
The syntax covers most common cases, but any extraordinary case requires to add additional script block or refactor a component to use script instead of script setup. Some of these cases cannot be predicted at the time when a decision on component syntax is made. This results in inconsistencies and extra maintenance.
There are still tools that don't fully support script setup syntax.
Vue reactivity transforms is another example of syntax sugar that uses $ dollar, etc macros for concise component code at the expense of its clarity and the compliance with ECMAScript standards.
CodePudding user response：
You can use script setup, or setup() inside of Options API.
Some people prefer Options API, the rest enjoys CAPI.
This is just a preference and allowing people to still use Options API since it's more accessible and easier to grasp (especially for beginners).
CAPI being aimed more towards advanced users or React hooks devs.