本人移動端開發(fā)者一枚噪珊，今年由于公司在業(yè)務上的變更，從零開始學習了vue以及一系列前端相關的東西吭从，妥妥的開啟了新手模式篷牌，由于一上手就是vue3.0了，所以碰到的很多問題都很難找到對應的解決方案款票，接下來就聊聊組件命名這件事情吧控硼。
在vue2.0中想要給組件命名方式很簡單，目前網(wǎng)上大部分的教程都是這種方式
<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
