vue3.0 + setup +lang=“ts“_setup lang="ts

只需要给 script 标签添加一个 setup 属性，那么整个 script 就直接会变成setup函数，所有顶级变量、函数，均会自动暴露给模板使用（无需再一个个 return了），开发效率将大大的提高！vue3.0 + setup +lang=“ts”

defineProps

来声明 props 相关信息。defineProps 接收的对象和组件选项 props 的值一样。
interface ListItem {
  name: string
  age: number
}
const props = defineProps<{
  msg: string
  title: string
  list: ListItem[]
}>()
1
2
3
4
5
6
7
8
9
10

withDefaults

// withDefaults 的第二个参数便是默认参数设置，会被编译为运行时 props 的 default 选项
interface ListItem {
  name: string
  age: number
}
interface Props {
  msg: string
  // title可选
  title?: string
  list: ListItem[]
}
const props = withDefaults(defineProps<Props>(), {
  title: '我是标题',
  // 对于array、object需要使用函数，和以前的写法一样
  list: () => []
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

defineEmits

编译器宏声明 emits 相关信息。
const emits = defineEmits<{
  (e: 'changeMsg', value: string): void
}>()

const handleChangeMsg = () => {
  emits('changeMsg', 'Hello TS')
}
1
2
3
4
5
6
7
8

useAttrs

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld class="hello-word" title="我是标题" />
</template>

// ./components/HelloWorld.vue
<script setup>
import { useAttrs } from 'vue'

const attrs = useAttrs()
// js中使用
console.log(attrs.class)  // hello-word
console.log(attrs.title)  // 我是标题
</script>

<template>
  <!-- 在模板中使用 $attrs 访问属性 -->
  <div>{{ $attrs.title }}</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

useSlots

//在模板中使用 $slots 来访问 slots 数据。
//在 <script setup> 中使用 useSlots 函数获取 slots 插槽数据。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld>
    <div>默认插槽</div>
    <template v-slot:footer>
      <div>具名插槽footer</div>
    </template>
  </HelloWorld>
</template>

<script setup>
import { useSlots } from 'vue'

const slots = useSlots()
// 在js中访问插槽默认插槽default、具名插槽footer
console.log(slots.default)
console.log(slots.footer)
</script>

<template>
  <div>
    <!-- 在模板中使用插槽 -->
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

顶层await支持

//<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()

<script setup>
	const userInfo = await fetch(`/api/post/getUserInfo`)
</script>
1
2
3
4
5