Vue3 setup语法糖常用方法

vue3目前有两种编写方式，选项式和组合式，选项式和vue2书写方式没有区别，组合式引用了setup方法，正常使用需要在script标签内部添加setup方法，并且return所有需要在标签上使用的变量，略显冗杂，因此，vue提供了setup的语法糖写法，即将set直接写在script标签上，即

<script lang="ts" setup></script>

现在问题来了，没有选项式了，实现keepalive的name没地方写了，总不能再写一个script吧，太不紧凑了，而且我们知道setup方法中有两个参数，分别是props和context，props是父组件传递的参数，context可以理解成组件本身即this，我们会常用到其中的emit，expose等方法，但现在没有setup方法了，我们可以通过以下方式实现：

1、通过插件将name属性放在script标签上

①引入依赖vite-plugin-vue-setup-extend

npm i vite-plugin-vue-setup-extend -D

②将插件集成到vite.config.ts

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

plugins: PluginOption = [
    vue(),
    VueSetupExtend()
]

③在script上添加name即可

<script lang="ts" setup name="TestName"></script>

2、组件传参props

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
console.log(props.data)

3、事件传递emit

const events = defineEmits(['backData']);
events('backData', {});

4、定义向外抛出变量，即可在父组件通过$refs的形式调用

const submit = () => {
  console.log("父组件调用了")
};
defineExpose({
  submit
});

另外，provide/inject在选项式编程中使用钩子实现，在组合式中通过方法实现，和watch、computed等钩子变化相同，再此不复述了