Vue3当中通过script和defineOptions两种方式指定组件的name

在vue2当中我们可以通过name属性来指定组件的名称，这个name会显示在vue调试工具当中，方便我们进行调试；当我们想实现一个无限递归的菜单组件时，也需要用到这个name属性，没有name属性的组件是无法递归的。

在vue3当中，当使用setup语法糖时，我们没有办法在script当中添加一个name属性，但是可以采取其他的方式来实现，代码如下：

1. 使用两个script块

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  console.log("页面挂载");
});
</script>

<script>
  export default {
    name: "Demo",
  }
</script>

2. 使用defineOptions，注意：版本要求 Vue 3.3+

<script setup>
import { onMounted, defineOptions } from 'vue';

defineOptions({
  name: "Demo"
});

onMounted(() => {
  console.log("页面挂载");
});
</script>