Vue3 setup script + TypeScript 实战用法（二）——ref、defineProps、defineEmits
2023-11-07 16:54:27
使用 ref、defineProps 和 defineEmits 提升 Vue3 组件功能
前言
在 Vue3 中，setup script 是定义响应式数据和方法的强大工具。除了这些基本功能之外，Vue3 还提供了一系列 API，用于增强组件的灵活性。ref 、defineProps 和 defineEmits 这些 API 使得开发响应式、可重用的组件变得更加简单。本文将深入探讨这三个 API 的用法，并提供代码示例以阐明它们的用途。
1. ref：创建响应式引用
ref API 用于创建可变的响应式引用。这意味着你可以指向任何类型的值，包括对象、数组和函数。当所引用值的底层状态发生变化时，Vue3 将自动更新视图。
基本用法：
import { ref } from 'vue'
const count = ref(0)
// 获取 ref 的值
console.log(count.value) // 输出：0
// 修改 ref 的值
count.value++
// Vue3 自动更新视图
console.log(count.value) // 输出：1
2. defineProps：定义组件 props
defineProps API 用于定义组件接收的 props。props 是组件之间传递数据的机制。使用 defineProps ，你可以指定组件需要的 props，它们的类型和默认值。
基本用法：
import { defineProps } from 'vue'
export default {
defineProps: {
// 必填的字符串类型 prop
message: {
type: String,
required: true
},
// 可选的数字类型 prop，默认值为 0
count: {
type: Number,
default: 0
}
}
}
3. defineEmits：定义组件事件
defineEmits API 用于定义组件可以发出的事件。事件是组件之间通信的另一种方式。使用 defineEmits ，你可以指定组件可以发出哪些事件，以及它们的事件参数类型。
基本用法：
import { defineEmits } from 'vue'
export default {
defineEmits: {
// 自定义事件，接受一个字符串类型的参数
'update:message': (message) => {
if (typeof message !== 'string') {
throw new Error('message must be a string')
}
// 发出事件
this.$emit('update:message', message)
}
}
}
结论
ref 、defineProps 和 defineEmits 是 Vue3 中强大的 API，可用于提升组件的响应性、可重用性和可维护性。通过了解和熟练使用这些 API，你可以创建功能强大的组件，并在项目中轻松实现复杂的行为。
常见问题解答
-
ref 与 reactive 的区别是什么？
ref 创建一个可变的响应式引用，而 reactive 创建一个响应式对象。ref 适用于需要直接访问和修改原始值的场景，而 reactive 适用于需要管理嵌套对象和数组的场景。
-
defineProps 的 required 属性有什么作用？
required 属性用于强制子组件提供该 prop。如果子组件未提供必填 prop，则会抛出错误。
-
defineEmits 的参数可以是函数吗？
是的，defineEmits 的参数可以是函数。该函数用于验证事件参数的类型并执行任何必要的操作，例如发出事件。
-
是否可以在 setup script 之外使用 ref、defineProps 和 defineEmits？
不，ref、defineProps 和 defineEmits 只能在 setup script 中使用。这是因为这些 API 依赖于 setup script 提供的响应式上下文。
-
这些 API 如何影响组件的性能？
这些 API 不会对组件的性能产生重大影响。它们是 Vue3 响应式系统的一部分，该系统是轻量级且高效的。
