欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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> 

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

相关标签: vue vue.js