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)!