0、前言
在vue3中删除了vue2中的data函数，因此，vue3.0要在template中使用某些变量就必须在最后return出来，多次声明变量，不太方便，也不太友好。而在vue3.2版本之后，我们只需在script标签上加上setup属性，不需要再写return就可以直接在template中使用，写起代码就很流畅。哎，这就很棒！
vue3.0的写法示例代码。
<template>
<div>
<p>{
{ `${state.name}发布于${state.age}，${msg}` }}</p>
<button @click="onClick">点击</button>
<ChildComp />
</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from "vue"
import ChildComp from './ChildComp.vue'
export default defineComponent({
// 注册组件
components: {
ChildComp
},
props: {
show: {
type: Boolean,
default: false
}
},
emits: ['on-confirm'],
setup(props, { emit }) {
console.log(props.show) // false
const msg = ref('');
msg.value = '哎，这就很不棒！';
const state = reactive({
name: 'vue3.0',
age: '2020年9月18日'
})
// 点击事件
const onClick = () => {
emit('on-confirm')
}
// 必须return出来
return {
msg,
state,
onClick
}
}
})
</script>
刚开始使用 script setup 语法糖的时候，编辑器会提示这是一个实验属性，要使用的话，需要固定 vue 版本。在2021年 6 月底，该提案被正式定稿，在 vue3.1.3 的版本上，继续使用但仍会有实验性提案的提示，在 vue3.2 中，才会去除提示并移除一些废弃的 API。
script setup 是 vue3.2 的新语法糖，并不是新增的功能模块，主要好处有：（1）更少的模板内容，代码简洁，不需要写return；（2）能够使用ts更好的声明props，以及抛出事件；（3）更好的运行时性能。
1、变量、方法不需要renturn
变量、方法以及import导入的内容不用在 return 暴露出来，不需要写 export default 和 setup 函数，只需在 script 标签加上 setup 属性，直接声明变量、方法以及import导入的内容使用即可，使模板代码更加简洁。
<template>
<div>
<!-- 使用变量 -->
<p>{
{ `${state.name}发布于${state.age}，${msg}` }}</p>
<!-- import导入 -->
<ul>
<li v-for="item in subjectList" :key="item.value">
{
{item.label}}
</li>
</ul>
<!-- 使用方法 -->
<button @click="onClick">点击</button>
</div>
</template>
<!-- 在script标签上添加setup属性 -->
<script setup lang="ts">
import { ref, reactive } from "vue"
import { subjectList } from './utils.js'
const msg = ref('');
msg.value = '哎，这就很棒！';
const state = reactive({
name: 'vue3',
age: '2020年9月18日'
})
// 点击事件
const onClick = ():void => {
console.log('点击了')
}
</script>
2、引入组件自动注册
在 script setup 语法糖中引入组件，组件不需要在 components 中注册了，引入的组件会自动注册，而且组件无法指定 name属性，主要以文件的名字为主，省略name属性
<template>
<div>
<Child />
</div>
</template>
<!-- 在script标签上添加setup属性 -->
<script setup lang="ts">
import Child from './Child.vue'
</script>
3、defineProps和defineEmits
在script setup中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 script setup 中不需要导入是直接可用的。传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的范围，因此，传入的选项不能引用在 setup 范围中声明的局部变量，这样做会引起编译错误。
（1）defineProps
//父组件
<template>
<div>
<Child :name="name" />
</div>
</template>
<!-- 在script标签上添加setup属性 -->
<script setup lang="ts">
import { ref } from 'vue';
import Child from './Child.vue';
const name = ref('张三')
</script>
//子组件
<template>
<div>
<p>{
{ `${props.name}在学习JavaScript` }}</p>
</div>
</template>
<script setup lang="ts">
// defineProps不需要从vue中导入
const props = defineProps({
name: {
type: String,
default: '张三'
}
})
// 或者
const props = defineProps(['name'])
</script>
（2）defineEmits
// 父组件
<template>
<div>
<Child @on-confirm="onConfirm" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Child from './Child.vue';
const show = ref(false)
// 点击确定关闭弹框等操作
const onConfirm = (val: boolean) => {
show.value = val
}
</script>
// 子组件
<template>
<button type="button" @click="handleConfirm">确定</button>
</template>
<script setup lang="ts">
const emit = defineEmits(['on-confirm'])
const handleConfirm = () => {
// 此处也可以传入参数
emit('on-confirm', false)
}
</script>
4、defineExpose
defineExpose可以主动暴露出组件的属性和方法。
// 子组件示例代码
// 子组件
<template>
<div v-if="show">
<p>{
{ count }}</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0)
const show = ref(false)
const onShow = () => {
show.value = true
}
// defineExpose暴露出count属性和onShow方法
defineExpose({
count,
onShow
})
</script>
// 父组件示例代码
// 父组件
<template>
<div>
<button type="button" @click="onClick">父组件点击</button>
<Child ref="childRef" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Child from './Child.vue';
// Child组件的ref
const childRef = ref(null)
// 在父组件操作子组件的暴露出的属性或方法
const onClick = () => {
childRef.value.count += 1;
childRef.value.onShow();
}
</script>
5、useSlots和useAttrs
在 script setup 使用 slots 和 attrs 的情况应该是很比较少见的，大部分人是(SFC)模式开发，在<template/>通过<slot/>标签就可以渲染插槽，可以在模板中通过 $slots 和 $attrs 来访问它们。主要在JSX /TSX使用比较多。
（1）useSlots
slots可以获取父组件中插槽传递的虚拟Dom对象。
// 父组件
<template>
<Child>
<span>默认插槽</span>
<template v-slot:footer>
<div>具名插槽footer</div>
</template>
</Child>
</template>
<script setup>
import Child from './Child.vue'
</script>
// 子组件
<template>
<div>
<!-- 在模板中使用插槽 -->
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
<script setup lang="ts">
import { useSlots } from 'vue'
const slots = useSlots()
// 访问插槽默认插槽default、具名插槽footer
console.log(slots.default)
console.log(slots.footer)
</script>
（2）useAttrs
attrs用来获取父组件中非props的传递到子组件的属性，包括class和style属性。
// 父组件
<template>
<Child class="child-class" title="子组件title" />
</template>
<script setup>
import Child from './Child.vue'
</script>
// 子组件
<template>
<!-- 在模板中使用 $attrs 访问属性 -->
<div>{
{ $attrs.title }}</div>
</template>
<script setup lang="ts">
import { useAttrs } from 'vue'
const attrs = useAttrs()
// 使用
console.log(attrs.class) // child-class
console.log(attrs.title) // 子组件title
</script>
在jsx/tsx中使用
<script lang="tsx">
import { defineComponent, ref, useSlots } from 'vue';
export default defineComponent({
setup(){
const slots = useSlots();
const str = ref<string>('tsx的使用');
return () => (
<>
<div class='async'>{str.value}</div>
<div>{ slots.default ? slots.default() : 'foo' }</div>
<div>{ slots.bar?.() }</div>
</>
);
}
})
</script>
6、顶层await
<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。
// api/system
export const getUserInfo = async () => {
const res: any = await request.get(`/api/user/info`)
return res
}
7、与普通的
<script setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有这些需要的情况下或许会被使用到：
无法在 <script setup> 声明的选项，例如 inheritAttrs 或通过插件启用的自定义的选项。
声明命名导出。
运行副作用或者创建只需要执行一次的对象
<script>
// 普通 <script>, 在模块范围下执行(只执行一次)
runSideEffectOnce()
// 声明额外的选项
export default {
inheritAttrs: false,
customOptions: {}
}
</script>
<script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>
注释：本文转载