查看本专栏目录
还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
| No. | 内容链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |
Vue 3.0 引入了 Composition API，这是一个新的API风格，旨在解决 Vue 2.x 中 Options API 在构建大型组件时遇到的逻辑复用和代码组织问题。Composition API 提供了一种更灵活的方式去组合和重用逻辑，同时保持了 Vue 的响应式特性。
Composition API 的核心概念
setup() 函数：
setup() 是 Composition API 的入口点，它在组件创建之前执行，并且是 Composition API 的主要作用域。它接收两个参数：props 和 context。props 包含传递给组件的所有属性，而 context 是一个对象，包含 attrs、slots、emit 等。setup() 函数返回的对象中的所有属性都会被暴露给模板和其他选项（如 computed、methods），因此你可以在模板中直接使用这些返回的属性。 响应式数据：
使用ref 和 reactive 来创建响应式数据。 ref 用于创建一个包含单个值的响应式对象。它返回一个带有 .value 属性的对象，该属性指向原始值。reactive 用于将一个普通对象转换为一个响应式对象。与 ref 不同的是，它不需要通过 .value 访问内部属性。 可以使用 toRefs 将 reactive 对象转换为普通的对象，其中每个属性都是 ref，这有助于解构响应式对象而不丢失响应性。 计算属性：
computed 函数用于定义计算属性，类似于 Options API 中的 computed 选项。它接受一个 getter 函数或一个具有 get 和 set 方法的对象，并返回一个只读的或可写的 ref。 侦听器：
watch 和 watchEffect 用于监听状态的变化并执行副作用。 watch 接受一个源（可以是 ref、reactive 对象的属性或者一个函数）和一个回调函数，当源变化时会触发回调。watchEffect 会立即执行传入的函数，并自动追踪其依赖的响应式数据。每当依赖的数据发生变化时，这个函数就会重新执行。 生命周期钩子：
Composition API 中的生命周期钩子以on 开头，例如 onMounted、onUnmounted 等等。它们可以直接在 setup() 函数中调用，用于注册生命周期回调。 提供/注入：
provide 和 inject 允许你在祖先组件和后代组件之间共享状态。与 Options API 类似，但更加灵活，因为你可以从 setup() 返回的对象中提供和注入值。 错误处理：
errorCaptured 和 onErrorCaptured 可以用来捕获来自子组件的错误。onErrorCaptured 是 Composition API 版本的 errorCaptured 钩子。 异步数据获取：
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';export default { setup() { // 创建一个响应式的 count const count = ref(0); // 定义一个方法 const increment = () => { 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 是非常重要的。