Compare Vue 3 Setup Script with the Options API
If you've used Vue then you are probably familiar with the options API. So you might be confused with the component files that Vite generates.
They are actually using Vue's new setup script syntax. Where instead of exporting an options object, you use a <script> tag with the setup attribute! This ends up looking nicer and makes your code more readable.
Instructor: [0:00] If you're familiar with the Vue ecosystem, and even if you're initially familiar with Vue 3, then the example component that's generated by Vite can look a little strange. This is how the Vue CLI might have created the same component. It starts with a template, and then it exports a default object, which is called the Options object, the Options API.
[0:24] Inside of that API, we have the name of the component, we have the props that it receives, and we have the reactive data that is going to be able to be used in the component. Style's the same. Everything else is the same.
[0:35] Vue 3 introduced the Composition API. The Composition API allows us to, instead of using data and computed methods, we can use the setup function. Inside here, I can declare a reactive property, so const count would equal a ref, a reactive reference value, which is going to be .
[1:01] Let me comment this out, because we're not going to use that. Ref needs to be imported from Vue, so import { ref } from 'vue'. Then I need to return that count so it's available for use in my component.
[1:15] A recent change to Vue allows us, instead of using the Options API at all, to use script with this setup attribute. That allows us to do everything that we were doing inside of our setup property, for the Composition API, inside of our script tag as first-level code.
[1:35] We are JavaScripters as we'd like. There are certain functions that we need to use to be able to define props. Rather than props being in the options object, we use this defineProps that's available globally. We'll see some other things that the Composition API helps us with throughout this project.
[1:52] Just to show you this is the legacy API and everything's working as it was before. Then, if I switch it back, this is the new way, and it's working as well.
[2:01] Throughout this project, I'm going to use the setup script form and being able to create my Vue components. It stops me having to create an export, this options object. It allows me to use the Composition API, and in my opinion, allows us to create tidier and more readable components.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!