vue3 中的name

1、vue2中的组件名

作用：在Vue2中，name属性用来给组件命名，方便在开发者工具的调试时追踪组件层级

<template>
  <div class="Name">
  </div>
</template>
<script>
export default {
  name: "Name",
  data(){
    return{}
  }
};
</script>

2、Vue3中的组件名

2.1 第一种写法：

就是在vue文件写两个script标签，第一个标签用来定义组件名，第二个用来写自己的代码。

<template>
    <div class='Home'>
    </div>
</template>
 
<script lang="ts">
export default {
    name: 'Home'
}
</script>
 
<script setup lang="ts">
import {ref} from 'vue'
 
</script>

2.2 第二种写法：需要安装插件

1.复制这个命令下载第三方插件：    npm install vite-plugin-vue-setup-extend -D

2.我们在vite.config.ts文件中引入，并调用。

3.页面中

name改变

3、应用场景

3.1 应用一：使用 keep-alive 时，搭配组件 name 进行缓存过滤

使用 keep-alive时，可使用include和exclude依据name属性来指定：是否缓存组件。

3.2 应用二：vue-devtools 调试工具

vue-devtools 调试工具中，显示的组见名称由组件name属性决定
好处：可看到组件名称更好的定位