开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第15天，点击查看活动详情

在实际项目开发过程中，我们经常会发现有一些功能是通用的，尤其是一些js代码在很多地方都会使用，如果每次都复制粘贴的话会非常麻烦，而且如果后期其中有一个地方需要修改，那么每个使用到这段代码的地方都要修改，代码不易维护，在vue2中我们可以使用mixin混入的方式来解决这个问题，在vue3有一种更简单的方式那就是组合式函数。

组合式函数

“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。组合式函数逻辑复用的核心思想就是在组合式函数里写逻辑代码，需要在模板中使用或其他地方使用的变量或者函数直接return出来，然后在需要使用这些逻辑的组件中引入即可。

定义组合式函数

下面这一段代码需要在很多组件中使用，那么我们就可以将其抽离出来，放到组合式函数中。

以下是未经抽离的原始代码

<template>
  <div class="hello">
    <div>姓名：{{fullname}}</div>
    <div>年龄：{{person.age}}</div>
    <div>朋友：{{person.friend.name}}-{{person.friend.age}}</div>
    <div v-for="(item, index) in person.hobbies" :key="index">爱好列表
      <div>{{item}}</div>
    </div>
    <button @click="updateInfo">修改信息</button>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue';

const person1 = reactive({
  firstName: '安妮',
  lastName: '海瑟薇'
});
const fullname = computed(() => {
  return `${person1.firstName}·${person1.lastName}`;
});

const person = reactive({
  name: '艾薇儿',
  age: 18,
  friend: {
    name: '安妮·海瑟薇',
    age: '28'
  },
  hobbies: ['music', 'dance', 'movie']
});

const updateInfo = () => {
  person.friend.name = '疯驴子';
}
</script>

初始效果：

修改信息之后的效果：

下面开始抽离代码了。

新建一个hooks文件夹，里面放置不同的组合式函数js文件。

// hooks下的updateData.js
import { reactive, computed } from 'vue';

export function updateData() {
  const person1 = reactive({
    firstName: '安妮',
    lastName: '海瑟薇'
  });

  const fullname = computed(() => {
    return `${person1.firstName}·${person1.lastName}`;
  });
  
  const person = reactive({
    name: '艾薇儿',
    age: 18,
    friend: {
      name: '安妮·海瑟薇',
      age: '28'
    },
    hobbies: ['music', 'dance', 'movie']
  });
  
  const updateInfo = () => {
    person.friend.name = '疯驴子';
  };

  return { fullname, person, updateInfo };
}

划重点：一定要将在组件中需要使用到的变量或者方法return出去，否则是没有效果的

在组件中使用

在组件中使用的时候首先import该组合式函数，然后执行函数，得到需要的变量和方法。

<template>
  <div class="hello">
    <div>姓名：{{fullname}}</div>
    <div>年龄：{{person.age}}</div>
    <div>朋友：{{person.friend.name}}-{{person.friend.age}}</div>
    <div v-for="(item, index) in person.hobbies" :key="index">爱好列表
      <div>{{item}}</div>
    </div>
    <button @click="updateInfo">修改信息</button>
  </div>
</template>

<script setup>
import { updateData } from '../hooks/updateData';
const { fullname, person, updateInfo } = updateData();
</script>

效果同上。

划重点：组合式函数中的复用代码可以同时在多个组件中使用哦。

异步代码 组合式函数中除了使用同步代码外，也是可以使用异步代码的。

// fetch.js
import { ref } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)

  fetch(url)
    .then((res) => res.json())
    .then((json) => (data.value = json))
    .catch((err) => (error.value = err))

  return { data, error }
}

vue3之组合式函数逻辑复用

组合式函数

定义组合式函数