Vue 3.0 中的 Vue Composition API 详解

查看本专栏目录

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.内容链接1Openlayers 【入门教程】 - 【源代码+示例300+】 2Leaflet 【入门教程】 - 【源代码+图文示例 150+】 3Cesium 【入门教程】 - 【源代码+图文示例200+】 4MapboxGL【入门教程】 - 【源代码+图文示例150+】 5前端就业宝典 【面试题+详细答案 1000+】
Vue 3.0 引入了 Composition API，这是一个新的API风格，旨在解决 Vue 2.x 中 Options API 在构建大型组件时遇到的逻辑复用和代码组织问题。Composition API 提供了一种更灵活的方式去组合和重用逻辑，同时保持了 Vue 的响应式特性。

Composition API 的核心概念

1. setup() 函数：- setup() 是 Composition API 的入口点，它在组件创建之前执行，并且是 Composition API 的主要作用域。- 它接收两个参数：props 和 context。props 包含传递给组件的所有属性，而 context 是一个对象，包含 attrs、slots、emit 等。- setup() 函数返回的对象中的所有属性都会被暴露给模板和其他选项（如 computed、methods），因此你可以在模板中直接使用这些返回的属性。
2. 响应式数据：- 使用 ref 和 reactive 来创建响应式数据。 - ref 用于创建一个包含单个值的响应式对象。它返回一个带有 .value 属性的对象，该属性指向原始值。- reactive 用于将一个普通对象转换为一个响应式对象。与 ref 不同的是，它不需要通过 .value 访问内部属性。- 可以使用 toRefs 将 reactive 对象转换为普通的对象，其中每个属性都是 ref，这有助于解构响应式对象而不丢失响应性。
3. 计算属性：- computed 函数用于定义计算属性，类似于 Options API 中的 computed 选项。它接受一个 getter 函数或一个具有 get 和 set 方法的对象，并返回一个只读的或可写的 ref。
4. 侦听器：- watch 和 watchEffect 用于监听状态的变化并执行副作用。 - watch 接受一个源（可以是 ref、reactive 对象的属性或者一个函数）和一个回调函数，当源变化时会触发回调。- watchEffect 会立即执行传入的函数，并自动追踪其依赖的响应式数据。每当依赖的数据发生变化时，这个函数就会重新执行。
5. 生命周期钩子：- Composition API 中的生命周期钩子以 on 开头，例如 onMounted、onUnmounted 等等。它们可以直接在 setup() 函数中调用，用于注册生命周期回调。
6. 提供/注入：- provide 和 inject 允许你在祖先组件和后代组件之间共享状态。与 Options API 类似，但更加灵活，因为你可以从 setup() 返回的对象中提供和注入值。
7. 错误处理：- errorCaptured 和 onErrorCaptured 可以用来捕获来自子组件的错误。onErrorCaptured 是 Composition API 版本的 errorCaptured 钩子。
8. 异步数据获取：- async setup() 可以用于异步加载数据，结合 Suspense 组件可以让父组件等待子组件完成加载后再渲染。

Composition API 的优点

• 逻辑复用：通过组合多个 setup() 函数，你可以更容易地在不同组件间复用逻辑。
• 更好的代码组织：你可以按照功能将相关逻辑分组，而不是按照选项（如 data、methods、computed）来组织代码。
• TypeScript 支持：Composition API 更加适合 TypeScript，因为它允许你更好地类型化你的组件逻辑。

示例

下面是一个简单的例子，展示了如何使用 Composition API：

<template><div><p>Count:{{ count }}</p><button @click="increment">Increment</button></div></template><script>import{ ref, computed }from'vue';exportdefault{setup(){// 创建一个响应式的 countconst count =ref(0);// 定义一个方法constincrement=()=>{
      count.value++;};// 计算属性const doubleCount =computed(()=> count.value *2);// 监听 count 的变化watch(count,(newVal, oldVal)=>{
      console.log(`count changed from ${oldVal} to ${newVal}`);});// 返回要暴露给模板的属性return{
      count,
      increment,
      doubleCount
    };}};</script>

结论

Vue 3.0 的 Composition API 为开发者提供了更多的灵活性和控制力，特别是在构建复杂的组件和逻辑复用方面。它不仅改进了代码的组织结构，还增强了对 TypeScript 的支持，使得开发体验更加流畅。对于那些希望深入理解 Vue 3.0 的新特性和最佳实践的开发者来说，掌握 Composition API 是非常重要的。