面试题：Vue中Vue Composition API如何实现代码逻辑的基本复用

1. 创建可复用逻辑的组合函数

import { ref } from 'vue';

// 定义一个可复用的组合函数
export function useToggle() {
  const isOn = ref(false);

  const toggle = () => {
    isOn.value =!isOn.value;
  };

  return {
    isOn,
    toggle
  };
}

2. 在组件中复用该逻辑

<template>
  <div>
    <button @click="toggle">{{ isOn? '关闭' : '打开' }}</button>
  </div>
</template>

<script setup>
import { useToggle } from './useToggle.js';

const { isOn, toggle } = useToggle();
</script>

解释

创建组合函数 useToggle：
- 首先从 vue 导入 ref 方法，ref 用于创建一个响应式的数据引用。
- 在 useToggle 函数内部，通过 ref(false) 创建了一个初始值为 false 的响应式变量 isOn，用来表示开关的状态。
- 定义了一个 toggle 函数，用于切换 isOn 的值，通过修改 isOn.value 来改变其状态，因为 ref 创建的变量需要通过 .value 来访问和修改其值。
- 最后返回一个包含 isOn 和 toggle 的对象，以便在其他组件中使用。
在组件中复用：
- 在组件的 <script setup> 部分，导入 useToggle 函数。
- 通过解构赋值从 useToggle 返回的对象中获取 isOn 和 toggle。
- 在 <template> 中，使用 isOn 来显示按钮的文本，并通过 @click 绑定 toggle 函数，实现开关切换的交互逻辑。这样就实现了在多个组件中复用切换开关状态的逻辑。如果使用 reactive，也可以类似实现，不过 reactive 用于创建对象类型的响应式数据，示例如下：

import { reactive } from 'vue';

export function useToggle() {
  const state = reactive({
    isOn: false
  });

  const toggle = () => {
    state.isOn =!state.isOn;
  };

  return {
    state,
    toggle
  };
}

在组件中使用：

<template>
  <div>
    <button @click="toggle">{{ state.isOn? '关闭' : '打开' }}</button>
  </div>
</template>

<script setup>
import { useToggle } from './useToggle.js';

const { state, toggle } = useToggle();
</script>

这里通过 reactive 创建了一个响应式对象 state 来存储开关状态，使用方式与 ref 类似，但无需 .value 来访问对象属性。

面试题：Vue中Vue Composition API如何实现代码逻辑的基本复用

知识考点

面试题答案

1. 创建可复用逻辑的组合函数

2. 在组件中复用该逻辑

解释