vue3+ts+vite作用域

Vue 3通过Composition API引入了新的作用域概念，即setup函数。在Vue 3中，我们可以在组件中使用setup函数来定义组件的逻辑，并且可以在其中使用响应式数据、计算属性、方法等。

作用域是指在组件中定义的变量和函数的可见范围。在Vue 3中，setup函数中定义的变量和函数只在当前组件的作用域内可见，不会污染全局作用域。这样可以提高代码的可维护性和可复用性。

使用TypeScript和Vite开发Vue 3应用时，可以通过以下步骤来设置作用域：

1. 在Vue组件中定义setup函数，它接收两个参数：props和context。
2. 在setup函数内部，可以使用props参数来接收父组件传递的数据，并将其定义为响应式数据。
3. 可以在setup函数内部定义其他变量和函数，并通过return语句将它们暴露给模板使用。
4. 在模板中可以直接使用setup函数中暴露的变量和函数。

例如，下面是一个使用Vue 3、TypeScript和Vite开发的简单示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('Hello, Vue 3');

    const increment = () => {
      message.value += '!';
    };

    return {
      message,
      increment,
    };
  },
});
</script>

在上面的示例中，我们通过ref函数将message定义为响应式数据，并在setup函数中定义了increment函数。然后，我们将message和increment通过return语句暴露给模板使用。

这样，就可以在模板中使用message变量和increment函数，而它们的作用域仅限于当前组件。