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 的核心概念

• 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：

1. <template>
2.   <div>
3.     <p>Count: {{ count }}</p>
4.     <button @click="increment">Increment</button>
5.   </div>
6. </template>
8. <script>
9. import { ref, computed } from 'vue';
11. export default {
12.   setup() {
13.     // 创建一个响应式的 count
14.     const count = ref(0);
16.     // 定义一个方法
17.     const increment = () => {
18.       count.value++;
19.     };
21.     // 计算属性
22.     const doubleCount = computed(() => count.value * 2);
24.     // 监听 count 的变化
25.     watch(count, (newVal, oldVal) => {
26.       console.log(`count changed from ${oldVal} to ${newVal}`);
27.     });
29.     // 返回要暴露给模板的属性
30.     return {
31.       count,
32.       increment,
33.       doubleCount
34.     };
35.   }
36. };
37. </script>

复制代码

结论

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。