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

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

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

  • defineProps(和 withDefaults): 用于声明组件的 props。
  • defineEmitsdefineExpose: 用于声明组件的自定义事件。
  • defineOptions: 用于定义组件的其他选项,如 namecomponents 等。
  • useSlotsuseAttrs: 用于访问组件的插槽和属性。
  • withModifiers: 用于定义模板中事件修饰符的函数。
  • withKeys: 用于定义模板中键盘事件的修饰符函数。
  • vModel: 用于在 <script setup> 中使用 v-model
  • vShow: 用于在 <script setup> 中使用 v-show

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

例如:

javascript 复制代码
import { ref, reactive, computed } from 'vue';

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

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

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

相关推荐
timeweaver20 小时前
前端也必看的Docker 核心命令与实战指南
前端·后端·架构
哒哒哒52852020 小时前
网络请求瀑布效应
前端
Mapmost20 小时前
【高斯泼溅】当3DGS遇上传统模型:从“画在一起”到“画得对”的全攻略
前端
鹿衔`20 小时前
PySpark 提交模式对比与实践推荐
前端·npm·node.js
Code知行合壹20 小时前
Vue.js基础入门
javascript·vue.js·ecmascript
2501_9418053120 小时前
从同步调用阻塞到异步任务执行体系落地的互联网系统工程实践随笔与多语言语法思考
前端
kk哥889921 小时前
如何使用 CSS 变量实现响应式设计?
前端·css
蓝胖子的多啦A梦21 小时前
TailwindCSS:高效构建现代化UI
前端·css·使用教程·tailwind css
QT 小鲜肉21 小时前
【Linux命令大全】003.文档编辑之head命令(实操篇)
linux·运维·服务器·前端·javascript·chrome