Vue3 composition API怎么實(shí)現(xiàn)邏輯復(fù)用

這篇文章主要介紹“Vue3 composition API怎么實(shí)現(xiàn)邏輯復(fù)用”，在日常操作中，相信很多人在Vue3 composition API怎么實(shí)現(xiàn)邏輯復(fù)用問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue3 composition API怎么實(shí)現(xiàn)邏輯復(fù)用”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

Composition API實(shí)現(xiàn)邏輯復(fù)用的步驟：

1. 抽離邏輯代碼到一個(gè)函數(shù)，這個(gè)函數(shù)命令約定為useXXX格式（這點(diǎn)同React Hooks）

2. 在setup中引用函數(shù)useXXX

舉下例子，定義一個(gè)獲取當(dāng)前鼠標(biāo)位置的方法

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

這種方式，導(dǎo)出和導(dǎo)入都可以隨意解構(gòu)

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

// 1. 定義一個(gè)函數(shù),抽離邏輯，命名使用 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('開始監(jiān)聽鼠標(biāo)劃動(dòng)事件');
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    console.log('解除監(jiān)聽鼠標(biāo)劃動(dòng)事件');
    window.removeEventListener('mousemove', update)
  })
  return {
    x, 
    y
  }
}

 
// 導(dǎo)出這個(gè)函數(shù)
export default useMousePosition

<!-- 在任意一個(gè)組件,都可以調(diào)用這個(gè)方法 -->

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

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

第二種，使用reactive定義鼠標(biāo)坐標(biāo)對(duì)象

這種導(dǎo)出的方式，在組件中導(dǎo)入時(shí)是不能解構(gòu)的

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('開始監(jiān)聽鼠標(biāo)劃動(dòng)事件');
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    console.log('解除監(jiān)聽鼠標(biāo)劃動(dòng)事件');
    window.removeEventListener('mousemove', update)
  })

  return {
    mouse
  }
}
<template>
  <!-- 使用對(duì)象方式顯示信息 -->
  <p>mouse position2: {{mouse.x}}, {{mouse.y}}</p>
</template>
<script>
import { useMousePosition2 } from './useMousePosition'
export default {
  name: 'MousePosition', 
  setup() {
    // useMousePosition2是使用reactive定義的,這種不可以解構(gòu)
    const { mouse } = useMousePosition2()
    return {
      mouse
    }
  }
}
</script>

第三種，使用toRefs

使用這種方式，可以將reactive對(duì)象，解構(gòu)為ref對(duì)象

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

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

  onMounted(() => {
    console.log('開始監(jiān)聽鼠標(biāo)劃動(dòng)事件');
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    console.log('解除監(jiān)聽鼠標(biāo)劃動(dòng)事件');
    window.removeEventListener('mousemove', update)
  })
  
  // 這里，使用toRefs解構(gòu)成ref對(duì)象
  return toRefs(mouse)
}
<template>
  <p>mouse position: {{x}}, {{y}}</p>
</template>

<script>
import { useMousePosition3 } from './useMousePosition'
export default {
  name: 'MousePosition', 
  setup() {
    // 使用reactive定義鼠標(biāo)坐標(biāo)對(duì)象，然后通過toRefs將其解構(gòu)成ref對(duì)象
    const { x, y } = useMousePosition()
    console.log(x, y)
    return {
      x, y
    }
  }
}
</script>

三種方式都可以實(shí)現(xiàn)，但是我們一般使用時(shí)，都會(huì)返回ref對(duì)象，所以比較建議使用第一種和第三種，盡量不使用第二種

到此，關(guān)于“Vue3 composition API怎么實(shí)現(xiàn)邏輯復(fù)用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！