Vue3 组件化开发的常用 API 知识点汇总

在 Vue3 的组件化开发中，掌握常用 API 是提升开发效率与质量的关键。下面将对一些核心 API 进行汇总介绍。

首先是 setup 函数，它是 Vue3 组件的新入口点。在 setup 中可以使用响应式数据、计算属性和方法。例如，通过 ref 和 reactive 来创建响应式数据。ref 适用于基本数据类型，如 const count = ref(0)；reactive 更适合用于对象，像 const user = reactive({ name: 'John', age: 30 })。setup 函数接收 props 和 context 参数，props 用于接收父组件传递的数据，context 包含 attrs、slots 和 emit 等属性，方便处理组件间的交互。

computed API 用于创建计算属性。它有两种使用方式，一种是只提供 getter 函数，如 const fullName = computed(() => user.firstName + ' ' + user.lastName)；另一种是同时提供 getter 和 setter 函数，可实现双向数据绑定。

watch API 则用于监听数据的变化。它可以监听一个或多个响应式数据，当数据发生变化时执行相应的回调函数。比如 watch(count, (newValue, oldValue) => { console.log('Count changed from', oldValue, 'to', newValue) })。

在组件通信方面，emit 用于子组件向父组件发送事件。在 setup 中通过 context.emit 触发自定义事件，父组件则通过监听该事件来接收数据。

provide 和 inject API 实现了跨级组件通信。在祖先组件中使用 provide 提供数据，如 provide('message', 'Hello from ancestor')；在后代组件中使用 inject 注入数据，const message = inject('message')。

life cycle hooks 在 Vue3 中也有了一些变化。onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount 和 onUnmounted 等钩子函数，让开发者能在组件的不同生命周期阶段执行特定代码。

熟练掌握这些 Vue3 组件化开发的常用 API，能够帮助开发者更高效地构建复杂的用户界面，实现组件间的灵活交互与数据管理，从而提升整个项目的开发体验与性能。