Vue3刚出来的时候，我觉得 vue-hooks 时代来了，终于可以抛弃单文件组件的写法，彻底融入到函数式编程中，在react和vue之间无缝切换，然而脱离了 模板 的vue，写起来简直太刻板了，所谓的compositionApi的作用感官上并没有那么明显。
直到我发现了如下的script-setup写法，让我觉得这才应该是真正的 vue3
如何定义组件名 => name
script-setup 无法指定当前组件的名字，所以使用的时候以文件名为主
如何导入组件 => components
在 script-setup 中导入任意的组件就可以直接在 template 中使用
<script setup>
// imported components are also directly usable in template
import Foo from './Foo.vue'
</script>
<template>
<Foo />
</template>
如何导入指令 => directive
导入指令的用法同 导入组件
<script setup>
import { directive as clickOutside } from 'v-click-outside'
</script>
<template>
<div v-click-outside />
</template>
如何使用 props
通过defineProps指定当前props类型的同时，获得上下文的props对象
在script中需要props[key]引用，而template中可直接调用key
<script setup>
import { defineProps } from 'vue'
// expects props options
const props = defineProps({
foo: String,
})
</script>
如何使用 emit
通过defineEmit指定当前组件含有的触发事件
事件通过 defineEmit 返回的上下文 emit 进行触发
<script setup>
import { defineEmits } from 'vue'
// expects emits options
const emit = defineEmits(['update', 'delete'])
</script>
如何获取 slots 和 attrs
<script setup>
import { useContext } from 'vue'
const { slots, attrs } = useContext()
</script>
Note
<script setup></script> 遵循 setup 函数的规则，仅在组件加载时调用一次
<script setup>
// Top level await can be used inside <script setup>.
// The resulting setup() function will be made async.
const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>
传送门 => vue-script-setup官方资料
