Vue3 script-setup 清新单文件写法

Vue3刚出来的时候，我觉得 vue-hooks 时代来了，终于可以抛弃单文件组件的写法，彻底融入到函数式编程中，在react和vue之间无缝切换，然而脱离了 模板 的vue，写起来简直太刻板了，所谓的compositionApi的作用感官上并没有那么明显。

直到我发现了如下的 script-setup 写法，让我觉得这才应该是真正的 vue3

如何定义组件名 => name

在 script-setup 中导入任意的组件就可以直接在 template 中使用

如何导入指令 => directive

导入指令的用法同 导入组件

如何使用 props

通过defineProps指定当前props类型的同时，获得上下文的props对象
在script中需要props[key]引用，而template中可直接调用key

如何使用 emit

通过defineEmit指定当前组件含有的触发事件
事件通过 defineEmit 返回的上下文 emit 进行触发

如何获取 slots 和 attrs

Note

 遵循 setup 函数的规则，仅在组件加载时调用一次

获取数据

基本上就是在之前的方法名前加上了一个 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
  }
}