《Vue3 九》＜script setup＞ 语法糖语法

<script setup> 是在单文件中使用 Composition API 的编译时语法糖，里面的代码会被编译成组件 setup() 选项的内容。

<script setup> 中的代码在每次组件实例被创建的时候都会被执行。

定义数据：

在 <script setup> 语法糖的写法中，顶层的绑定会暴露给 template 模板，因此在 <script setup> 中定义的变量、函数等可以直接使用。不需要像在 setup() 中一样 return 返回。

<template>
  <div>{
  { message }}</div>
</template>

<!-- 在 <script setup> 中编写 Composition API 就相当于是在 setup() 函数中编写 Composition API -->
<script setup>
import {ref} from 'vue'

// 在 <script setup> 顶层编写的代码都会被暴露给 template 模板，因此在 <script setup> 中定义的变量、函数等不需要像在 setup() 中一样 return 返回，可以直接使用
const message = ref('Hello Vue')
</script>

<style scoped>
</style>   

导入组件：

在 <script se