Vue3的逻辑复用

109 阅读 0 评论 72 点赞

我是靠谱客的博主精明水壶，这篇文章主要介绍Vue3的逻辑复用，现在分享给大家，希望可以做个参考。

基础代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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，很明显，这是一个可以复用的逻辑，观察这段代码，有没有发现它是一个可以复用的逻辑

复制代码

1
2
3
4
let loadingRef = ref(false)
function toggleLoading(flag) {
  loadingRef.value = flag
}

抽取可服用逻辑代码

复制代码

1
2
3
4
5
6
7
8
import { ref } from 'vue'
export function useToggle() {
  let loadingRef = ref(false)
  function toggleLoading(flag) {
    loadingRef.value = flag
  }
  return { loadingRef, toggleLoading }
}

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>