公司代码扫描要求一个函数不能超过50行，那么一般vue3写法setup函数肯定超了，又懒得写到hooks，同事介绍了去年vue3出的新的语法糖，研究了下，写篇博客
简单的将，去掉了exprot defult这个壳子，然后也不需要写return了，props和emit写法变成如下
const props = defineProps({data: {type: Object,default: () => ({}),},});const emit = defineEmits(['close']);
后面的方法直接引用即可，如props.data，emit(‘close’);
还有删掉了components，import引入的组件不需要在这里声明了，可以直接用
如果组件是异步调用进来，改成如下
const XXXDialog = defineAsyncComponent(() => import('./XXX-dialog.vue'));
注意如果之前的写法，父组件直接调用子组件的ref，用这种写法会获取不到子组件的信息，需要在子组件加如下
const info = ref([]);defineExpose({info})
需要通过ref读的信息丢到defineExpose里面
完整版如下
<template>//html代码</template><script setup lang="ts">import {ref, watchEffect, reactive, computed, defineProps, defineEmits } from 'vue';const XXXDialog = defineAsyncComponent(() => import('./XXX-dialog.vue'));const props = defineProps({data: {type: Object,default: () => ({}),},});const emit = defineEmits(['close', 'submit']);//后面是交互逻辑const onCancel = () => {emit('close');};</script><style lang="scss" scoped>//样式</style>
总体来说写的代码变少了，所有代码都在script里面。
最后附上学习的几个链接：
/p/471806345
/qq_41880073/article/details/124199104
/weixin_43931876/article/details/18286
