I have been doing a lot of Vue.js in the last 6 months and I need to say Vue is awesome. I am coming from “React ❤️ world” but with the release of Vue 3 and composition API, writing code in Vue or writing code in React is pretty much the same.
What I want to share today is a RFC that will bring even more love for Vue from React world.
What is script setup ? What are we talking about here ? We talk about a compile step for script tag to improve the authoring experience when using the Composition API inside Single File Components. Lot’s of words 😄, let me give you an example.
Let’s say we have this component:. As you can see we have our count ref and we export it to the template by return it in the setup() method.
This is pretty clear when you have few exports or one function but when the component becomes bigger and you have 10 exports or more that return becomes BIG 🤯 pretty fast.
This is where script setup can help, you don’t need to return anything or use setup function. The code looks much cleaner and nice. Isn’t that a piece of beauty ? Just export what you use in template using export keyword and you are done.
But what convinced me to use this and made me love this even more is the integration with Typescript, look at next example and how you define your props:.
Look at those props 🤩 . If you want to lean more on what is supported and how to use this please check the official page where you can find easy to read examples for all cases.
Explicit typing computed property getters & setters
< script setup > is a new syntax sugar from Vue3. The type is the suggestion in Vue's Git RFC. It should be made clear that this is not intended to completely replace any current writing.
Its purpose is to provide developers with more concise syntax and simplify the lengthy template code when using the Composition API to write its single file component.
Without using < script setup >, our code is:.
When we need to import a component, we not only need to import it explicitly in the file header, but also need to add a declaration in the components field.
Moreover, if the variables declared in the setup need to be used by the template, they need to be returned explicitly at the end of the setup. If your component template uses few variables, this situation can be reluctantly accepted.
However, when the variables and methods gradually increase, it is undoubtedly a boring thing to return after setup every time. You will also face great challenges when refactoring the code.
To solve this problem, vue3 added script setup syntax. After using < script setup >, the same function is realized. The code is as follows:. Not only the data, calculation attributes and methods, but also the instructions and components can be automatically obtained in our template, which is very magical.
To make a long story short, this syntax makes a single file component simpler. In the original words of the RFC, "the main goal of this proposal is to reduce the verbosity of the use of the Composition API within SFC by directly exposing the context of < script setup > to the template."
This is what we just saw. We don't need to care about the value returned in the setup method (because sometimes we should forget to return the value we need in the setup, so the template can't get the corresponding value).
We can simplify the code. In script setup, component import is automatically registered:.
The component registration step is omitted, and there is no explicit action to export variables.
Props needs to be defined by using defineProps.
The usage is similar to that of props before.
Emit uses defineEmit to define events that a component can emit.
Visual Studio Code Plugin
useContext accesses the slots and properties of the component. defineProps/defineEmit will make simple type inference based on the passed value.
Define props – as the name suggests, it allows us to define props for components;.
Define emits – defines the events that a component can emit. useContext – the slots and properties of the component can be accessed.
Instructions are the same as components. They are automatically registered when imported.
Use props & emit & usecontext
The default value is true. In this case, the attribute bindings of the parent scope that are not recognized as props will be "fallback" and applied to the root element of the child component as an ordinary HTML attribute.
Statement termination convention
If await is used, it needs to be used with suspend asynchronous component.
Volar is a vscode plug-in to enhance the vue writing experience. Using volar plug-in can get the best support for script setup syntax.
To learn more about script setup, click?? Added by e11rof on Wed, 09 Mar 2022 03:49:19 +0200.
We cover how to add TypeScript support, defining components, type inference and explicit typing computed properties and props.
Explicit typing in the data option.
Explicit typing props
Explicit typing a computed property. Explicit typing props. We can set up TypeScript in Vue in multiple ways. Add it to an existing project with vue add typescript.
We cover this process at the end of the lesson.
Generate a new project and select TypeScript support.
To keep things simple, we’ll generate a new project with the following choices.
We want to Manually select features. Choose TypeScript. To keep things simple, we’ll choose n for class-style component syntax.
Type inference in the data option
We’ll add Babel for transpiling etc. tipIf you’re using VSCode as your editor, you can cd into your new project and run the following command to open the project in the editor.
If you’re developing Vue applications with TypeScript, it’s recommended to use eitherVisual Studio Code(free) orWebstorm(commercial) editors.
Both editors have integrated support for TypeScript. If you’re using VSCode as your editor, we recommend using the freeVeturorVolarextension, which provides additional features like TypeScript inference inside components.