Vue3的单文件组件的组合式Api（2）

1、<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。<script setup> 中的代码会在每次组件实例被创建的时候执行。相比于普通的 <script> 语法，它具有更多优势：
更少的样板内容，

• 更简洁的代码。
• 能够使用纯 Typescript 声明 props 和抛出事件。
• 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
• 更好的 IDE（集成开发环境） 类型推断性能(减少语言服务器从代码中抽离类型的工作)。
  2、顶层的绑定会被暴露给模板
  当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用：（该点击事件并不会响应式动态更新数据，响应式请看4）

<script lang="ts" setup>
  // 变量
  let msg = 0;
  
  // 函数
  function log(){
    msg +=1 
    console.log(msg,'msg')
  }
</script>


<template>
  <div class="box">
    <el-button type="primary" @click="log">{{msg}}</el-button>
  </div>
</template>

3、使用组件
<script setup> 范围里的值也能被直接作为自定义组件的标签名使用：

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

将 MyComponent 看做被一个变量所引用。如果你使用过 JSX，在这里的使用它的心智模型是一样的。其 kebab-case 格式的 <my-component> 同样能在模板中使用。不过，我们强烈建议使用 PascalCase 格式以保持一致性。同时也有助于区分原生的自定义元素。

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

4、响应式
响应式状态需要明确使用响应式 APIs 来创建。和从 setup() 函数中返回值一样，ref 值在模板中使用的时候会自动解包：

<script lang="ts" setup>
import {ref} from 'vue'

let count1 = ref(0);
// 响应式
function addCount(){
    count1.value +=1 
}
</script>

<template>
  <div>
    <el-button type="primary" @click="addCount">{{count1}}</el-button>
  </div>
</template>

或者

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

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

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

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

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

6、递归组件
一个单文件组件可以通过它的文件名被其自己所引用。例如：名为 FooBar.vue 的组件可以在其模板中用 <FooBar/> 引用它自己。
请注意这种方式相比于 import 导入的组件优先级更低。如果有命名的 import 导入和组件的推断名冲突了，可以使用 import 别名导入：

import { FooBar as FooBarChild } from './components'