本人移动端开发者一枚，今年由于公司在业务上的变更，从零开始学习了vue以及一系列前端相关的东西，妥妥的开启了新手模式，由于一上手就是vue3.0了，所以碰到的很多问题都很难找到对应的解决方案，接下来就聊聊组件命名这件事情吧。
在vue2.0中想要给组件命名方式很简单，目前网上大部分的教程都是这种方式
<script>
setup(){
export default {
name: 'MyComponentName'
}
}
</script>
image.gif
甚至vue3.0中也可以写这种方式，但是如果采用script setup 语法糖的话这种方式就不可行了，原因是它会自动以文件名为主，不需要在写name属性。
<script setup>
</script>
image.gif
由于我这边需要使用keep-alive对页面进行缓存，而include属性必须要指定组件的name才会生效，所以设置name成了不可避免要做的事情。解决方案也很简单，如下代码所示：
<script>
export default {
name: 'xxx',
};
</script>
<script setup>
</script>
直接在script setup同级中再添加一个script即可，这种方式用来解决keep-alive页面缓存问题。
如果同时使用了typescript的话，可以配合插件直接在script标签中设置name，具体方式如下：
安装插件：vite-plugin-vue-setup-extend
然后在script 中直接设置name即可，这样就不用多写一个script脚本了。
<script lang="ts" setup name="xxx">
</script>
image.gif
