Composition API實現邏輯複用的步驟：

1. 抽離邏輯程式碼到一個函式，這個函式命令約定為useXXX格式（這點同React Hooks）
2. 在setup中引用函式useXXX

舉下例子，定義一個獲取當前滑鼠位置的方法

第一種，直接使用ref定義的useMousePosition：

這種方式，匯出和匯入都可以隨意解構

// useMousePosition.
import { ref,onMounted,onUnmounted } from ''

// 1. 定義一個函式,抽離邏輯，命名使用 useXXX
function useMousePosition() {
  // 使用ref定義
  const x = ref(0)
  const y = ref(0)

  function update(e) {
    console.log(x.value,y.value);

    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => {
    console.log('開始監聽滑鼠划動事件');
 http://www.cppcns.com
 
   window.addEventListener('mousemove',update)
  })

  onUnmounted(() => {
    console.log('解除監聽滑鼠划動事件');
    window.removeEventListener('mousemove',update)
  })
  return {
    x,y
  }
}

 
// 匯出這個函式
export default useMousePosition

<!-- 在任意一個元件,都可以呼叫這個方法 -->

<template>
  <p>mouse position: {{x}},{{y}}</p>
</template>

<script>
import useMousePosition from './useMousePosition'
export default {
  name: 'MousePosition',setup() {
    // useMousePosition是使用ref定義變數的,這種可以解構
    const { x,y } = useMousePosition()
    console.log(x,y)
    return {
      x,y
    }
  }
}
</script>

第二種，使用reactive定義滑鼠座標物件

這種匯出的方式，在元件中匯入時是不能解構的

import {  onMounted,onUnmounted,reactive } from 'vue'

export function useMousePosition2() {
  // 使用reactive定義
  const mouse = reactive({
    x: 0,y: 0
  })

  function update(e) {
    mouse.x = e.pageX
    mouse.y = e.pageY
  }

  onMounted(() => {
    console.log('開始監聽滑鼠划動事件');
    window.addEventListener('mousemove',update)
  })

  return {
    mouse
  }
}
<template>
  <!-- 使用物件方式顯示資訊 -->
  <p>mouse position2: {{mouse.x}},{{mouse.y}}</p>
</template>
<script>
import { useMousePosition2 } from './useMousePosition'
export default {
  name: 'MousePosition',setup() {
    // useMousePosition2是使用reactive定義的,這種不可以解構
    const { mouse } = useMousePosition2()
    return {
      mouse
    }
  }
}
</script>

第三種，使用toRefs

使用這種方式，可以將reactive物件，解構為ref物件

export function useMousePosition3() {
  // 使用reactive定義
  const mouse =http://www.cppcns.com reactive({
    x: 0,update)
  })
  
  // 這裡，使用toRefs解構成ref物件
  return toRefs(mouse)
}
<template>
  <www.cppcns.com;p>mouse position: {{x}},{{y}}</p>
</template>

<script>
import { useMousePosition3 } from './uwww.cppcns.comseMousePosition'
export default {
  name: 'MousePosition',setup() {
    // 使用reactive定義滑鼠座標物件，然後通過toRefs將其解構成ref物件
    const { x,y
    }
  }
}
</script>

三種方式都可以實現，但是我們一般使用時，都會返回ref物件，所以比較建議使用第一種和第三種，儘量不使用第二種

到此這篇關於Vue3 composition API實現邏輯複用的方法的文章就介紹到這了,更多相關Vue3 composition API邏輯複用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！