何时使用:当你的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>