So implementieren Sie die Wiederverwendung von Logik mit der Vue3-Kompositions-API

// useMousePosition.js
importiere { ref, onMounted, onUnmounted } von 'vue'

// 1. Definieren Sie eine Funktion, extrahieren Sie die Logik und nennen Sie sie useXXX
Funktion useMousePosition() {
  //Verwende ref um const x = ref(0) zu definieren
  konstant y = ref(0)

  Funktion update(e) {
    Konsole.log(x.Wert, y.Wert);

    x.Wert = e.SeiteX
    y.Wert = e.SeiteY
  }

  beimMounted(() => {
    console.log('Beginnen Sie mit der Überwachung von Mausbewegungsereignissen');
    window.addEventListener('Mausbewegung', aktualisieren)
  })

  beiUnmountet(() => {
    console.log('Überwachung von Maus-Scroll-Ereignissen entfernen');
    window.removeEventListener('Mausbewegung', aktualisieren)
  })
  zurückkehren {
    X, 
    j
  }
}

 
// Diese Funktion exportieren export default useMousePosition

<!-- Diese Methode kann in jeder Komponente aufgerufen werden-->

<Vorlage>
  <p>Mausposition: {{x}}, {{y}}</p>
</Vorlage>

<Skript>
importiere useMousePosition aus './useMousePosition'
Standard exportieren {
  Name: 'Mausposition', 
  aufstellen() {
    // useMousePosition verwendet ref um Variablen zu definieren, die dekonstruiert werden können const { x, y } = useMousePosition()
    konsole.log(x, y)
    zurückkehren {
      x, y
    }
  }
}
</Skript>

importiere { onMounted, onUnmounted, reaktiv } von 'vue'

Exportfunktion useMousePosition2() {
  // Verwenden Sie reactive, um const mouse = reactive({ zu definieren.
    x: 0, 
    j: 0
  })

  Funktion update(e) {
    Maus.x = e.SeiteX
    Maus.y = e.SeiteY
  }

  beimMounted(() => {
    console.log('Beginnen Sie mit der Überwachung von Mausbewegungsereignissen');
    window.addEventListener('Mausbewegung', aktualisieren)
  })

  beiUnmountet(() => {
    console.log('Überwachung von Maus-Scroll-Ereignissen entfernen');
    window.removeEventListener('Mausbewegung', aktualisieren)
  })

  zurückkehren {
    Maus
  }
}
<Vorlage>
  <!-- Objektmethode zum Anzeigen von Informationen verwenden -->
  <p>Mausposition2: {{mouse.x}}, {{mouse.y}}</p>
</Vorlage>
<Skript>
importiere { useMousePosition2 } von './useMousePosition'
Standard exportieren {
  Name: 'Mausposition', 
  aufstellen() {
    // useMousePosition2 ist mit reactive definiert, daher ist eine Dekonstruktion nicht möglich const { mouse } = useMousePosition2()
    zurückkehren {
      Maus
    }
  }
}
</Skript>

Exportfunktion useMousePosition3() {
  // Verwenden Sie reactive, um const mouse = reactive({ zu definieren.
    x: 0, 
    j: 0
  })

  Funktion update(e) {
    Maus.x = e.SeiteX
    Maus.y = e.SeiteY
  }

  beimMounted(() => {
    console.log('Beginnen Sie mit der Überwachung von Mausbewegungsereignissen');
    window.addEventListener('Mausbewegung', aktualisieren)
  })

  beiUnmountet(() => {
    console.log('Überwachung von Maus-Scroll-Ereignissen entfernen');
    window.removeEventListener('Mausbewegung', aktualisieren)
  })
  
  //Verwende hier toRefs zum Dekonstruieren in ein Ref-Objekt return toRefs(mouse)
}
<Vorlage>
  <p>Mausposition: {{x}}, {{y}}</p>
</Vorlage>

<Skript>
importiere { useMousePosition3 } von './useMousePosition'
Standard exportieren {
  Name: 'Mausposition', 
  aufstellen() {
    // Benutze reactive, um das Mauskoordinatenobjekt zu definieren, und dekonstruiere es dann über toRefs const { x, y } = useMousePosition() in ein Ref-Objekt.
    konsole.log(x, y)
    zurückkehren {
      x, y
    }
  }
}
</Skript>