【Vue3<script lang="ts" setup> Getting Started Tutorial】

features

• Less code, more concise, no need to use return {} to expose variables and methods, no need to actively register when using components
• Better TypeScript support, use pure TypeScript to declare props and throw events, which is more concise and intuitive.
  The disadvantage is that you need to learn more APIs

example

Here is a simple example

<template>
  <h1>{
    
    {
    
     msg }}</h1>
  <h1>{
    
    {
    
     logout() }}</h1>
  <button type="button" @click="add">count is: {
    
    {
    
     count }}</button>
  <ComponentA />
</template>
<script lang="ts" setup>
import {
    
     ref } from 'vue'
// 外部引入的方法，不需要通过 methods 选项来暴露它，模板可以直接使用
import {
    
     logout } from '../../utils/http'
// 外部引入的组件，不需要通过 components 选项来暴露它，模板可以直接使用
import ComponentA from './tree/index.vue'
//接收prpos
defineProps<{
      
      
  msg: String,
}>()
// 变量声明，模板可以直接使用
const count = ref(0)
// 函数声明，模板可以直接使用
function add() {
    
    
  count.value++
}
</script>

References: link address