Vue3 typescript setup 模式下，name 属性的使用

在Vue 3中，setup模式是一种组合API的新特性，它允许我们在单文件组件（SFC）中使用组合式API（即ref, reactive, computed, watch等）。在TypeScript的环境下，name属性通常用于调试目的。

在setup函数中使用name属性，你可以直接通过props的方式传递一个名为name的属性，并在setup函数内部使用它。这里是一个简单的例子：

<template>
  <div>{{ greeting }}</div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  props: {
    name: {
      type: String,
      default: 'World'
    }
  },
  setup(props) {
    const greeting = ref(`Hello, ${props.name}!`);
    return { greeting };
  }
});
</script>

在这个例子中，我们定义了一个名为name的prop，并在setup函数内部通过props参数访问它。然后我们创建了一个响应式引用greeting，它的初始值是一个包含name属性的问候语。在模板中，我们可以直接绑定greeting来展示问候语。