Vue3的逻辑复用主要通过“组合式函数”、“自定义指令”及“插件”来实现。提高了代码复用性，增强代码可维护性及促进团队合作。
1 逻辑复用
1.1 组合式函数
利用Vue组合式API来封装和复用有状态逻辑的函数。对组合式函数有如下约定：
- 命名，用驼峰法，并以use作开头。
- 输入参数，可以接收ref或getter类型的参数，最好用toValue()函数处理下这种类型的参数。
- 推荐始终返回一个包含多个ref的普通的非响应式对象。这样对该对象在组件中解构后仍可以保持响应性。
- 确保在onUnmounted()时清理副作用。
- 组合式函数只能在<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 = null
error.value = null
fetch(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的额外选项作为参数。
它有以下的作用：
- 通过app.component()和app.directive()注册一个或多个全局组件或自定义指令。
- 通过app.provice 使一个资源可被注入进整个应用。
- 向app.config.globalProperties中添加一些全局实例属性和方法。
- 一个可能包含上述三种功能的功能库。
//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列表中的元素或组件被插入、移动或移除时应用动画。
- 默认情况下，它不会渲染一个容器元素，可以传入tag来指定容器元素。
- 列表中的每个元素都必须有独一无二的key。
- 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) return
arr.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>
