使用Vue3的Composition API (Hooks) 重构代码

1：未整改之前的组件Person.vue

<template>
  <div class="person">
    <h2>当前求和为: {{ sum }}</h2>
    <h2>随机数数组为: {{ randomNumberList }}</h2>
    <button @click="incrementSum">加一</button>
    <button @click="addRandomNumber">添加随机数</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import { reactive, ref, onMounted } from 'vue'

onMounted(() => {
  console.log('Person组件挂载完毕')
})

let sum = ref(0)

const randomNumberList = reactive([0])

function incrementSum() {
  sum.value++
}

function addRandomNumber() {
  randomNumberList.push(Math.floor(Math.random() * 10))
}
</script>

2：使用 Vue 3 的 Composition API (Hooks 风格) 重构后的代码：

<template>
  <div class="person">
    <h2>当前求和为: {{ sum }}</h2>
    <h2>随机数数组为: {{ randomNumberList }}</h2>
    <button @click="incrementSum">加一</button>
    <button @click="addRandomNumber">添加随机数</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import { onMounted } from 'vue'
import { useCounter } from './hooks/useCounter'
import { useRandomNumbers } from './hooks/useRandomNumbers'

// 使用自定义 hooks
const { sum, incrementSum } = useCounter()
const { randomNumberList, addRandomNumber } = useRandomNumbers()

//也可以将挂载放到任意一个hooks中
onMounted(() => {
  console.log('Person组件挂载完毕')
})

3：然后创建两个自定义 Hook 文件：在src下创建hooks文件夹

3-1：src/hooks/useCounter.ts

import { ref } from 'vue'

export function useCounter(initialValue: number = 0) {
  const sum = ref(initialValue)

  const incrementSum = () => {
    sum.value++
  }

  return {
    sum,
    incrementSum
  }
}

3-2：src/hooks/useRandomNumbers.ts

import { reactive } from 'vue'

export function useRandomNumbers(initialList: number[] = [0]) {
  const randomNumberList = reactive([...initialList])

  const addRandomNumber = () => {
    randomNumberList.push(Math.floor(Math.random() * 10))
  }

  return {
    randomNumberList,
    addRandomNumber
  }
}

重构说明

1. 分离关注点：将计数逻辑和随机数逻辑分别提取到独立的 Hook 中

2. 可重用性：这些 Hook 可以在其他组件中复用

3. 可测试性：每个 Hook 可以单独测试

4. 可配置性：通过参数可以设置初始值，提高了灵活性

5. 组合性：在组件中可以组合多个 Hook 使用