#Vue3篇：defineOptions&vueUse

最新推荐文章于 2025-04-22 16:42:59 发布

程序员xiaolibao

最新推荐文章于 2025-04-22 16:42:59 发布

阅读量1.2k

点赞数 11

分类专栏： Vue3篇文章标签： vue.js

程序员xiaolibao

本文链接：https://blog.youkuaiyun.com/weixin_47075554/article/details/144348492

版权

Vue3篇专栏收录该内容

24 篇文章

订阅专栏

定义组件name

从 3.3 开始你可以直接通过

defineOptions 来设置组件名或 inheritAttrs 属性。

defineProps() 和 defineEmits()

const props = defineProps<{
  foo: string
  bar?: number
}>()

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

// 3.3+：另一种更简洁的语法
const emit = defineEmits<{
  change: [id: number] // 具名元组语法
  update: [value: string]
}>()

defineProps 和 defineEmits 都是只能在

创建 Vnodes

import { h } from 'vue'

const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    /* children */
  ]
)

https://cn.vuejs.org/guide/extras/render-function.html

rxjs库它是基于订阅-发布模式、观察者模式与迭代器实现的。

https://rxjs.dev/api/operators/every

vueuse一个提升开发效率的Vue3工具库

https://vueuse.org/core/useClipboard/

https://vueuse.nodejs.cn/core/useFocus/#google_vignette

‘defineOptions’ is not defined.eslintno-undef

https://www.cnblogs.com/fuct/p/17602675.html

defineComponent和defineOptions区别

主要用途
TypeScript 支持：defineComponent 主要是为了增强 TypeScript 的支持而设计的。它为组件提供了更好的类型推断和类型安全，确保了更灵活且可靠的组件定义方式1。
Composition API：当使用 Composition API 定义组件时，推荐使用 defineComponent 来封装组件逻辑。这不仅有助于简化组件定义，还能减少样板代码的数量。
使用方法
当你使用 defineComponent 创建一个组件时，你实际上是在创建一个返回 Vue 组件选项的对象的函数。这个对象可以包含所有的 Vue 组件选项，比如 name、props、setup 等等：

import { defineComponent } from 'vue';
export default defineComponent({
  name: 'MyComponent',
  props: {
    message: String,
  },
  setup(props) {
    // setup logic here...
    return {};
  }
});

通过这种方式，你可以获得更好的 IDE 提示和支持，特别是在使用 TypeScript 的时候。此外，defineComponent 还能帮助你在不丢失类型信息的情况下处理复杂的逻辑2。

DefineOptions
主要用途
SFC

<script setup>
// 不需要 import defineOptions from 'vue';

defineOptions({
  name: 'MyComponent',
  inheritAttrs: false,
  // 其他自定义选项...
});
</script>


这种方法非常适合在 <script setup> 中使用，因为它可以让代码更加简洁和易读，特别适合小型和中型组件。需要注意的是，尽管 defineOptions 可以用来定义 props 和 emits，官方文档建议优先使用专门为此目的设计的 defineProps 和 defineEmits 宏，因为它们提供了更好的类型推导和支持13