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 之后保留当前组件实例上下文的格式。
<script setup lang="ts"> import { getUserInfo } from '@/api/system' const userInfo = await getUserInfo(); console.log(userInfo) </script>
// 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>
8、总结
script setup语法糖确实很香！模板的内容更少，代码更简介，因此很有学习的必要，小伙伴们赶紧行动学起来吧。这里写了几个常用的语法糖用法，其他的一些用法可以自己学习，文章有写的不当的地方，欢迎指正修改。如果感觉文章实用对你有帮助，欢迎点赞收藏和关注，你的点赞关注就是我动力，大家一起学习进步。
还没有评论，来说两句吧...