vue3中Composition API写法 ＜script setup＞标签中哪些可以不用导入即可使用?

在 Vue 3 中使用 <script setup> 时，确实有一些全局的 API 和宏可以直接使用，而不需要显式地从 vue 包中导入它们。这是因为 <script setup> 是专门为了提供更简洁的组件编写方式而设计的，它内部利用了编译时的语法糖。

以下是在 <script setup> 中可以直接使用的 API 和宏，无需导入：

• defineProps（和 withDefaults）: 用于声明组件的 props。
• defineEmits 或 defineExpose: 用于声明组件的自定义事件。
• defineOptions: 用于定义组件的其他选项，如 name、components 等。
• useSlots 和 useAttrs: 用于访问组件的插槽和属性。
• withModifiers: 用于定义模板中事件修饰符的函数。
• withKeys: 用于定义模板中键盘事件的修饰符函数。
• vModel: 用于在 <script setup> 中使用 v-model。
• vShow: 用于在 <script setup> 中使用 v-show。

对于响应式 API，如 ref, reactive, computed, watch, watchEffect 等，你仍然需要从 vue 包中导入它们，因为它们不是编译时宏，而是实际的函数调用。

例如：

import { ref, reactive, computed } from 'vue';

const count = ref(0);
const state = reactive({ count: 0 });
const doubled = computed(() => count.value * 2);

在 <script setup> 中使用 JSX 时，你通常不需要导入像 h 或 Fragment 这样的函数，因为 JSX 转换会自动处理它们。但是，如果你需要在 JSX 之外的地方使用它们，比如返回一个渲染函数，你仍然需要导入。

总之，在 <script setup> 中，Vue 提供了一些编译时的宏来简化组件的编写，而响应式和生命周期等 API 需要正常导入使用。

原文地址：https://blog.csdn.net/qq_42391246/article/details/140637781

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！