Vue3的逻辑复用

基础代码

<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> 

这个案例演示了一个基础的逻辑复用，其实所谓的逻辑复用，下一个简单的定义的话，就是可以被重复利用的数据以及操作数据行为的整块集合