Vue3刚出来的时候，我觉得 vue-hooks 时代来了，终于可以抛弃单文件组件的写法，彻底融入到函数式编程中，在react和vue之间无缝切换，然而脱离了 模板 的vue，写起来简直太刻板了，所谓的compositionApi的作用感官上并没有那么明显。
直到我发现了如下的 script-setup 写法，让我觉得这才应该是真正的 vue3
如何定义组件名 => name
在 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>
获取数据
基本上就是在之前的方法名前加上了一个 on，且并没有提供 onCreated 的钩子，因为在 setup() 内执行就相当于在 created 阶段执行。下面我们在 mounted 阶段来请求数据：
import { reactive, onMounted } from 'vue'
export default {
setup() {
const state = reactive({
hits: []
})
onMounted(async () => {
const data = await fetch(
'https://hn.algolia.com/api/v1/search?query=vue'
).then(rsp => rsp.json())
state.hits = data.hits
})
return state
}
}
