Vue3 script-setup 清新单文件写法

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
  }
}