当前位置: 首页 > news >正文

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 包中导入它们,因为它们不是编译时宏,而是实际的函数调用。

例如:

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 需要正常导入使用。

http://www.lryc.cn/news/405661.html

相关文章:

  • Facebook Dating:社交平台的约会新体验
  • 【系统架构设计 每日一问】五 搜索型业务,采用MySQL+ES,如何保证数据一致性
  • 缓存穿透,缓存击穿,缓存雪崩
  • 运维 | 清理 Linux 磁盘空间方法汇总
  • googleTest 源码主线框架性分析——TDD 01
  • Python:对常见报错导致的崩溃的处理
  • linux系统进程占cpu 100%解决步骤
  • 数据传输安全--IPSEC
  • Unity XR Interaction Toolkit的安装(二)
  • 什么是PCB流锡槽焊盘/C型焊盘,如何设计?-捷配笔记
  • 电缆故障精准定位系统
  • Google Chrome 浏览器在链接上点右键的快捷键
  • Redis在SpringBoot中遇到的问题:预热,雪崩,击穿,穿透
  • Pytorch 6
  • iterator(迭代器模式)
  • 使用Web控制端和轻量级客户端构建的开放Web应用防火墙(OpenWAF)
  • 设计模式在FileBrowser中的几个应用
  • 【JavaEE进阶】——Spring AOP
  • Python - conda使用大全
  • ASPICE在汽车软件开发中的作用
  • 亚马逊云科技 re:Inforce 2024中国站大会
  • Lottie:动态动画的魔法棒
  • IPython使用技巧整理
  • C#数组复习
  • 无人机之在农业上的用途
  • opengaussdb在oepnEuler上安装
  • 一些和颜色相关网站
  • Linux系统编程-文件系统
  • 【解决】ubuntu20.04 root用户无法SSH登陆问题
  • (前缀和) LeetCode 238. 除自身以外数组的乘积