Vue3的逻辑复用
程序员文章站
2024-02-09 17:25:46
...
基础代码
<template>
<div v-if="loadingRef">loading...</div>
<div v-if="!loadingRef">list</div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
setup() {
let loadingRef = ref(false)
function toggleLoading(flag) {
loadingRef.value = flag
}
onMounted(() => {
// 显示loading
toggleLoading(true)
setTimeout(() => {
// 数据成功返回隐藏loading
toggleLoading(false)
}, 3000)
})
return {
loadingRef, toggleLoading
}
}
}
</script>
大家思考一个问题,如果其他组件也需要一样的功能,按照我们之前的写法,是不是每一个组件里都需要定义一个用来控制loading显示的响应式数据以及书写一个控制响应式数据的方法method,很明显,这是一个可以复用的逻辑,观察这段代码,有没有发现它是一个可以复用的逻辑
let loadingRef = ref(false)
function toggleLoading(flag) {
loadingRef.value = flag
}
抽取可服用逻辑代码
import { ref } from 'vue'
export function useToggle() {
let loadingRef = ref(false)
function toggleLoading(flag) {
loadingRef.value = flag
}
return { loadingRef, toggleLoading }
}
<template>
<div v-if="loadingRef">loading...</div>
<div v-if="!loadingRef">list</div>
</template>
<script>
import { onMounted } from 'vue'
import { useToggle } from '@/vueUse/useToggle'
export default {
setup() {
const { loadingRef, toggleLoading } = useToggle()
onMounted(() => {
// 显示loading
toggleLoading(true)
setTimeout(() => {
// 数据成功返回隐藏loading
toggleLoading(false)
}, 3000)
})
return {
loadingRef, toggleLoading
}
}
}
</script>
这个案例演示了一个基础的逻辑复用,其实所谓的逻辑复用,下一个简单的定义的话,就是可以被重复利用的数据以及操作数据行为的整块集合
上一篇: 网页提供文件下载效能
下一篇: 集成 PHP 应用和 Solr 搜索引擎