单文件组件 ＜script setup＞ ，语法糖

（1）要使用这个语法，需要将 setup attribute 添加到

<script setup>
console.log('hello script setup')
</script>

里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 script只在组件被首次引入的时候执行一次不同，script setup 中的代码会在每次组件实例被创建的时候执行。

（2）import 导入的内容也可以直接用

<script setup>
import { data} from './demo.vue'
</script>

（3）子组件不用注册，开盖即食

<template>
  <div>
  <demo></demo>
  </div>
</template>


<script setup>
import { ref } from 'vue'

//子组件demo
import demo from "../components/demo"

const count = ref(0)

</script>

并且:
子组件内调用自身，递归。
可直接用父组件中的名，如demo

（4）动态组件

由于组件被引用为变量而不是作为字符串键来注册的，在

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

请注意组件是如何在三元表达式中被当做变量使用的。