VUE3组合式API，这样写最优雅

vuejs是渐进式JavaScript框架，易学易用，性能出色，适用场景丰富的 Web 前端框架。作为vue框架的老粉，本篇文章总结一哈，如何在vue3的setup中优雅写组合式函数。

官方解释：组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。

组合式API通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins，而组合式 API 解决了 mixins 的所有缺陷。

组合式API特点

1. 代码复用：通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins，而组合式 API 解决了 mixins 的所有缺陷。

2. 响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。

3. 生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。

4. 依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

写法推荐

vue2推荐选项式api，vue3推荐组合式api，不做定论，适合开发者的写法就是最好的。不过官方特别说明：vue2适用于构建中型小型项目，而vue3因为加入了组合式api，性能和打包优势更胜一筹，适用于构建大型项目。

优质组合式api社区项目VueUse

这里可以学习到vue3组合式api的优秀项目案例，项目是vue社区成员构建的，值得学习和借鉴，助力vue3能力提升和培养。

网址：https://vueuse.org/guide/

举例说明

注意：组合式api是通过组合函数体现的

这里以获取元素大小和视口位置为例，复用逻辑封装到单文件内部，方便其他组件调用。如果出现属性重名情况，需要另取别名代替。

<template>
    <h1>组合式api</h1>
    <div class="box box1" ref="box1Ref">
        <p>width: {{ width }}</p>
        <p>height: {{ height }}</p>
        <p>x: {{ x }}</p>
        <p>y: {{ y }}</p>
    </div>
    <div class="box box2" ref="box2Ref">
        <p>width: {{ width2 }}</p>
        <p>height: {{ height2 }}</p>
        <p>x: {{ x2 }}</p>
        <p>y: {{ y2 }}</p>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const box1Ref = ref(null)
const box2Ref = ref(null)

import { useElementRect } from './useElementRect'
const { width, height, x, y } = useElementRect(box1Ref)
const { width: width2, height:height2, x:x2, y:y2 } = useElementRect(box2Ref)
</script>
<style>
   * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
   }
    .box {
        background: #040D19;
        border-radius: 12px;
        color: #fff;
        text-align: center;
        margin: 20px;
        padding-top: 20px;
    }
    .box1 {
        width: 200px;
        aspect-ratio: 1 / 1;
    }
    .box2 {
        width: 260px;
        aspect-ratio: 1 / 1;
    }
</style>

封装通用逻辑 

 useElementRect.js内部 这样封装完成后，其他vue组件只需要导入即可使用，返回同样的参数。

import { nextTick, ref } from 'vue'
export function useElementRect(ElRef) {
    const width = ref(0)
    const height = ref(0)
    const x = ref(0)
    const y = ref(0)
    nextTick(() => {
        const { width: W, height:H, x:X, y: Y, bottom, left, right, top } = ElRef.value.getBoundingClientRect()
        console.log(ElRef.value.getBoundingClientRect());
        width.value = W
        height.value = H
        x.value = X
        y.value = Y
    })
    return {
        width, 
        height, 
        x, 
        y
    }
}

页面效果

注意事项【小心坑】

如果在vue页面编写组合式函数，且是箭头函数，此时在函数声明之前调用箭头函数，会报错如下：

解决方案是：把箭头函数改成普通函数function即可

产生原因：普通function函数拥有自己的this，在js代码执行时会进行变量提升，什么意思，就是可以在声明函数之前调用函数是被允许的，而箭头函数没有this，无法进行变量提升，所以不用在箭头函数定义之前尝试调用它，会导致无法访问方法而报错。这是普通函数和箭头函数的差异。

参考文章

1. vue3官网

   https://cn.vuejs.org/guide/extras/composition-api-faq.html

2. vue3组合式api示例范本https://gist.github.com/yyx990803/8854f8f6a97631576c14b63c8acd8f2e