Vue中Js逻辑复用

何时使用：当你的js逻辑相同的时候，结构却不一样的时候，就可以采用逻辑复用。

例如以下代码：

下面就是结构不同，但是逻辑相同的代码，但是没有逻辑复用

<script setup lang="ts">
import { ref } from 'vue'

// 当你的逻辑相同时候，但是结构不同时，就可以对Jscript进行逻辑复用
const count = ref(0)
const increment = () => {
  count.value++
}
const count1 = ref(0)
const increment1 = () => {
  count1.value++
}
</script>
<template>
  <div>
    <h1>计数器：{{ count }}</h1>
    <button @click="increment">自增</button>
  </div>
  <div>
    <h1>计数器：{{ count1 }}</h1>
    <a href="#" @click="increment1">自增</a>
  </div>
</template>

<style lang="scss" scoped></style>

然后我们对上面的代码采用逻辑复用

<script setup lang="ts">
import { ref } from 'vue'

// 当你的逻辑相同时候，但是结构不同时，就可以对Jscript进行逻辑复用
// 把逻辑封装在一个函数里面
const useCounter = () => {
  const count = ref(0)
  const increment = () => {
    count.value++
  }
  return { count, increment }
}
// 通过结构把函数里面的属性和方法解构出来
const { count, increment } = useCounter()
// 通过结构把函数里面的属性和方法解构出来，并通过重命名来实现复用
const { count: num, increment: add } = useCounter()
</script>
<template>
  <div>
    <h1>计数器：{{ count }}</h1>
    <button @click="increment">自增</button>
  </div>
  <div>
    <h1>计数器：{{ num }}</h1>
    <a href="#" @click="add"></a>
  </div>
</template>
<style lang="scss" scoped></style>