Vue 3.0 中的 Vue Composition API 详解
https://i-blog.csdnimg.cn/blog_migrate/b282bd07ad4a787e70136a2fe0a07118.png#pic_center查看本专栏目次
照旧大剑师兰特：曾是美国某知名大学盘算机专业研究生，现为航空航海范畴高级前端工程师；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 的核心概念
[*] 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 是非常紧张的。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]