Vue3 script-setup 超清新单文件写法

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官方资料