Method of realizing logic multiplexing by Vue3 composition API

Composition API steps to implement logical multiplexing:

Pull the logic code into a function whose command convention is useXXX format (this is the same as React Hooks) Reference function useXXX in setup

For example, define a method to get the current mouse position

First, use useMousePosition defined by ref directly:

In this way, both export and import can be deconstructed at will

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

// 1.  Definition 1 Functions , Pulling away logic, naming and using  useXXX
function useMousePosition() {
  //  Use ref Definition 
  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(' Start listening for mouse stroke events ');
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    console.log(' Unlisten for mouse stroke events ');
    window.removeEventListener('mousemove', update)
  })
  return {
    x, 
    y
  }
}

 
//  Export this function 
export default useMousePosition

<!--  In any 1 Components , You can call this method  -->

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

<script>
import useMousePosition from './useMousePosition'
export default {
  name: 'MousePosition', 
  setup() {
    // useMousePosition Is to use ref Object that defines a variable , This can be deconstructed 
    const { x, y } = useMousePosition()
    console.log(x, y)
    return {
      x, y
    }
  }
}
</script>

Second, use reactive to define mouse coordinate objects

This way of exporting cannot be deconstructed when importing in components

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

export function useMousePosition2() {
  //  Use reactive Definition 
  const mouse = reactive({
    x: 0, 
    y: 0
  })

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

  onMounted(() => {
    console.log(' Start listening for mouse stroke events ');
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    console.log(' Unlisten for mouse stroke events ');
    window.removeEventListener('mousemove', update)
  })

  return {
    mouse
  }
}
<template>
  <!--  Display information as an object  -->
  <p>mouse position2: {{mouse.x}}, {{mouse.y}}</p>
</template>
<script>
import { useMousePosition2 } from './useMousePosition'
export default {
  name: 'MousePosition', 
  setup() {
    // useMousePosition2 Is to use reactive Defined , This cannot be deconstructed 
    const { mouse } = useMousePosition2()
    return {
      mouse
    }
  }
}
</script>

Third, use toRefs

In this way, you can deconstruct an reactive object into an ref object

export function useMousePosition3() {
  //  Use reactive Definition 
  const mouse = reactive({
    x: 0, 
    y: 0
  })

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

  onMounted(() => {
    console.log(' Start listening for mouse stroke events ');
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    console.log(' Unlisten for mouse stroke events ');
    window.removeEventListener('mousemove', update)
  })
  
  //  Here, use the toRefs Solution composition ref Object 
  return toRefs(mouse)
}
<template>
  <p>mouse position: {{x}}, {{y}}</p>
</template>

<script>
import { useMousePosition3 } from './useMousePosition'
export default {
  name: 'MousePosition', 
  setup() {
    //  Use reactive Define the mouse coordinate object, and then pass the toRefs Construct its solution ref Object 
    const { x, y } = useMousePosition()
    console.log(x, y)
    return {
      x, y
    }
  }
}
</script>

All three methods can be realized, but we will return ref objects when we use them, so it is recommended to use the first and third, and try not to use the second