Vue 组合式函数（一）

作者：Augus

2022-11-04
天津
本文字数：1138 字
阅读完需：约 4 分钟

前言

当我们开发大型项目的时候，为了更好的复用代码，往往会声明很多的组件，以此来解决模板及逻辑代码的冗余。但有些时候，我们只想进行逻辑代码的复用。比如说我们会把时间格式化的代码抽离成一个函数，传入时间，就会返回相应的时间格式。

而对于这种逻辑，我们可以叫它无状态的逻辑。接受相应格式的值，返回我们预期的结果。像这种封装无状态逻辑的库有很多，比如广为人知的 lodash 就是。

尽管以上两种封装方法，可以解决我们开发中很多的代码复用问题。但是我们如果想要封装带有生命周期的逻辑时（也就是有状态的逻辑，会随着时间而变化状态），却是力不从心的。当然，Mixin 可以做到，不过他很难以维护的问题却让人诟病。

为此，在 vue3 中推出了组合式函数来帮助我们复用有状态的逻辑。而这一亮点功能，也正是 vue3 的灵魂所在。

组合式函数

“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

下面，我们来通过一个简单的小例子（跟踪鼠标在当前页面的位置）来看一看组合式函数的奥秘。

我们先看在组件中使用组合式 api 是如何实现的：

<script setup>import { ref, onMounted, onUnmounted } from 'vue'
const x = ref(0)const y = ref(0)
function change(event) {  x.value = event.pageX  y.value = event.pageY}
onMounted(() => window.addEventListener('mousemove', change))onUnmounted(() => window.removeEventListener('mousemove', change))</script>
<template>当前鼠标的位置： {{ x }}, {{ y }}</template>

复制代码

像上面的代码，我们如果想进行复用的话，就可以通过组合式函数的方式来进行封装为一个 js 的文件。

// mouse.jsimport { ref, onMounted, onUnmounted } from 'vue'
// 组合式函数名约定以“use”开头export function useMouse() {  // 组合式函数封装管理的状态  const x = ref(0)  const y = ref(0)
  // 通过组合式函数可以随时更改其状态。  function change(event) {    x.value = event.pageX    y.value = event.pageY  }    // 组合式函数的有点就在于可以使用生命周期进行挂载  onMounted(() => window.addEventListener('mousemove', change))  onUnmounted(() => window.removeEventListener('mousemove', change))
  // 返回封装管理的状态  return { x, y }}

复制代码

然后，我们在组件中进行使用：

<script setup>import { useMouse } from './mouse.js'
const { x, y } = useMouse()</script>
<template>当前鼠标的位置： {{ x }}, {{ y }}</template>

复制代码

看过上面的代码，相信你也大概了组合式函数的妙用了吧。他很好的抽离有逻辑状态的代码，并能让所有组件进行复用。而且和在组件中一样，你可以使用所有的组合 api，做到很好的替代组件中的逻辑业务部分。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/bf9fc1751e81506317c40bffd】。文章转载请联系作者。

Augus

关注

爱瞎搞的软件开发工程师 2021-06-10 加入

某摸鱼集团

发布

暂无评论

创作场景

Vue 组合式函数（一）

前言

组合式函数

Augus

评论