vuejs是渐进式JavaScript框架,易学易用,性能出色,适用场景丰富的 Web 前端框架。作为vue框架的老粉,本篇文章总结一哈,如何在vue3的setup中优雅写组合式函数。
官方解释:组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。
组合式API通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins,而组合式 API 解决了 mixins 的所有缺陷。
组合式API特点
-
代码复用:通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins,而组合式 API 解决了 mixins 的所有缺陷。
-
响应式 API:例如 ref() 和 reactive(),使我们可以直接创建响应式状态、计算属性和侦听器。
-
生命周期钩子:例如 onMounted() 和 onUnmounted(),使我们可以在组件各个生命周期阶段添加逻辑。
-
依赖注入:例如 provide() 和 inject(),使我们可以在使用响应式 API 时,利用 Vue 的依赖注入系统。
写法推荐
vue2推荐选项式api,vue3推荐组合式api,不做定论,适合开发者的写法就是最好的。不过官方特别说明:vue2适用于构建中型小型项目,而vue3因为加入了组合式api,性能和打包优势更胜一筹,适用于构建大型项目。
优质组合式api社区项目VueUse
这里可以学习到vue3组合式api的优秀项目案例,项目是vue社区成员构建的,值得学习和借鉴,助力vue3能力提升和培养。
举例说明
注意:组合式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,无法进行变量提升,所以不用在箭头函数定义之前尝试调用它,会导致无法访问方法而报错。这是普通函数和箭头函数的差异。
参考文章