<script setup name="xxx">name的用法？

简述

在vue3的<script setup>语法中name的语法等同于：

<!-- 方式1：使用 name 属性（推荐）-->
<script setup name="MyComponent"></script>
​
<!-- 方式2：传统方式-->
<script setup></script>
<script>
export default {
  name: 'MyComponent'
}
</script>

有以下几个用途：

1）组件递归调用

当组件需要递归调用自身时，需要知道自己的名字：

<!-- TreeNode.vue -->
<script setup name="TreeNode">
// 递归调用自身
</script>
​
<template>
  <div>
    <TreeNode v-if="children" :data="childData" />
  </div>
</template>

2）vue devtools调试

在vue devtools中显示有意义的组件名称

<script setup name="Notice"></script>

devtools展示如下图所示：

3）KeepAlive 缓存控制

<script setup name="PostList">
// 可以被 KeepAlive 识别并缓存
</script>
​
<!-- 父组件 -->
<KeepAlive include="PostList">
  <component :is="currentView" />
</KeepAlive>