Vue3的逻辑复用主要通过“组合式函数”、“自定义指令”及“插件”来实现。提高了代码复用性，增强代码可维护性及促进团队合作。

1 逻辑复用

1.1 组合式函数

利用Vue组合式API来封装和复用有状态逻辑的函数。对组合式函数有如下约定：

1. 命名，用驼峰法，并以use作开头。
2. 输入参数，可以接收ref或getter类型的参数，最好用toValue()函数处理下这种类型的参数。
3. 推荐始终返回一个包含多个ref的普通的非响应式对象。这样对该对象在组件中解构后仍可以保持响应性。
4. 确保在onUnmounted()时清理副作用。
5. 组合式函数只能在<script setup>或setup()钩子中被调用。也只能被同步调用。

import { ref, toValue, watchEffect} from "vue";
import type {Ref} from "vue"
export function useFetch(url: string | Ref<any> ) {const data = ref(null)const error = ref(null)const fetchFun = () => {data.value = nullerror.value = nullfetch(toValue(url)).then((res) => res.json()).then((json) => (data.value = json)).catch((err) => (error.value = err))}watchEffect(() => {fetchFun()})return { data, error }
}

1.2 自定义指令

重用涉及普通元素的底层DOM访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。

el	指令所绑定的DOM元素。
binding对象	value: 传递给指令的值 oldValue: 之前的值 arg: 传递给指令的参数 modifiers：一个包含修饰符的对象 instance：使用该指令的组件实例 dir: 指令的定义对象
vnode	绑定元素的底层VNode
prevVnode	之前的渲染中指令所绑定元素的VNode，仅在beforeUpdate和updated钩子中使用。

表 钩子函数中的参数

<script setup lang="ts">
const vFocus = {mounted(el:HTMLElement,bindObj:{value: any,arg: string,modifiers:object}) {el.focus()console.log(bindObj)}
}
</script>

1.3 插件

能为Vue添加全局功能的工具代码。

一个插件可以是一个拥有install()方法的对象，也可以是install函数本身。它会接收app应用实例和传递给app.use的额外选项作为参数。

它有以下的作用：

1. 通过app.component()和app.directive()注册一个或多个全局组件或自定义指令。
2. 通过app.provice 使一个资源可被注入进整个应用。
3. 向app.config.globalProperties中添加一些全局实例属性和方法。
4. 一个可能包含上述三种功能的功能库。

//globalProvide.ts
export default {install(app:App,options: object) {console.log(app,options)app.provide("globalProvide",options)}
}// main.ts
app.use(globalProvide,{other: 'hmf',address: '深圳'})

2 内置组件

2.1 Transition

会在一个元素组件进入和离开DOM时应用动画。仅支持单个元素或组件作为其插槽内容。

触发条件：1）v-if、v-show触发。2）<component>切换的动态组件。3）改变元素的key属性。

图 6个应用于进入与离开过渡效果的CSS class

<Transition>有个name 属性，用于声明一个过渡效果名。例如，name设置为custom,则上面的v-enter-from 就变为custom-enter-from。

<script setup lang="ts">
import {ref} from "vue";const tag = ref(true)
const count = ref(0)
</script><template>
<button @click="tag = !tag">tag切换</button>
<button @click="count++">{{ count }}</button>
<div class="transition-container"><transition name="custom"><div v-if="tag">hello transition</div></transition><transition name="custom"><div v-if="tag" :key="count">hello {{ count }}</div></transition>
</div>
</template><style scoped>
.custom-enter-active,
.custom-leave-active {transition: opacity 0.5s ease;
}.custom-enter-from,
.custom-leave-to {opacity: 0;
}
</style>

2.2 TransitionGroup

会在一个v-for列表中的元素或组件被插入、移动或移除时应用动画。

1. 默认情况下，它不会渲染一个容器元素，可以传入tag来指定容器元素。
2. 列表中的每个元素都必须有独一无二的key。
3. CSS过渡的class会被应用在列表内的元素上，而不是容器元素上。

<script setup lang="ts">
import {ref} from "vue";let count = 0
const array:Array<number> = []
const arr = ref(array)function randomOpera(type: number) {const pos = Math.floor(Math.random() * arr.value.length)if (type == -1) {if (arr.value.length === 0) returnarr.value.splice(pos,1)} else {arr.value.splice(pos,0,count)count++}
}
</script><template>
<div><button @click="randomOpera(1)">插入</button><button @click="randomOpera(-1)">删除</button>
</div>
<div><transition-group name="custom"><div v-for="item in arr" :key="item">{{ item }}</div></transition-group>
</div>
</template><style scoped>
.custom-enter-active,
.custom-leave-active {transition: opacity 0.5s ease;
}.custom-enter-from,
.custom-leave-to {opacity: 0;
}
</style>

2.3 KeepAlive

在多个组件间动态切换时缓存被移除的组件实例。

可以指定需要被包含/排除的组件，指定形式有：1）字符串。2）正则表达式。3）包含这两个的数组。

被缓存实例的生命周期为：onActivated和onDeactivated。

<script setup lang="ts">
import {ref} from "vue";
import ComponentA from "@/article/components/ComponentA.vue";
import ComponentB from "@/article/components/ComponentB.vue";const tag = ref(true)
</script><template>
<button @click="tag = !tag">tag切换</button>
<keep-alive exclude="ComponentB"><component :is="tag ? ComponentA : ComponentB"/>
</keep-alive>
</template>

2.4 Teleport

使得一个组件模版的一部分逻辑上从属于该组件，但其部分DOM可以被渲染到该组件之外的其他HTML节点。

<script setup lang="ts">
import {ref} from "vue";const tag = ref(false)
</script><template>
<div class="a6-container"><div><button @click="tag = !tag">切换tag</button></div><teleport to="body" v-if="tag"><div class="model">Hello Teleport</div></teleport>
</div>
</template><style scoped>
.model {background: rgba(229, 231, 231, 0.44);position: fixed;width: 50%;height: 50%;left: 25%;top: 25%;display: flex;justify-content: center;align-items: center;
}
</style>