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

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

VUE3组合式API,这样写最优雅_第1张图片

官方解释:组合式 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 的依赖注入系统。

VUE3组合式API,这样写最优雅_第2张图片

写法推荐

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

优质组合式api社区项目VueUse

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

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

VUE3组合式API,这样写最优雅_第3张图片

VUE3组合式API,这样写最优雅_第4张图片

举例说明

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

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




封装通用逻辑 

 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
    }
}

页面效果

VUE3组合式API,这样写最优雅_第5张图片

注意事项【小心坑】

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

VUE3组合式API,这样写最优雅_第6张图片

VUE3组合式API,这样写最优雅_第7张图片

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

VUE3组合式API,这样写最优雅_第8张图片

产生原因:普通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

VUE3组合式API,这样写最优雅_第9张图片

你可能感兴趣的:(vue.js,前端,javascript)