vue3

13.Vue3/project2/src/App.vue

@@ -18,6 +18,7 @@
     <Demo15/> -->
     <Demo16  />
     <Demo17/>
+    <Demo18/>
   </div>
 </template>
 
@@ -59,6 +60,7 @@ import Demo14 from './components/Demo14.vue'
 import Demo15 from './components/Demo15.vue'
 import Demo16 from './components/Demo16.vue'
 import Demo17 from './components/Demo17.vue'
+import Demo18 from './components/Demo18.vue'
 // vue2 选项式API => Option API
 // Vue3 组合式API => component API
 // export default {

13.Vue3/project2/src/components/Demo18.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Hook</h1>
+    <p>鼠标位置:x轴{{x}},y轴{{y}}</p>
+  </div>
+</template>
+
+<script setup>
+import {useMove} from '../hooks/useMove';
+
+console.log(useMove())
+const {x,y} = useMove();
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project2/src/hooks/useMove.ts

@@ -0,0 +1,16 @@
+
+import { ref, onMounted} from 'vue'
+export function useMove() {
+    let x = ref(0);
+    let y = ref(0);
+    onMounted(()=>{
+        window.addEventListener('mousemove',changeUpdate)
+    })
+
+    function changeUpdate(event) {
+        console.log(event)
+        x.value = event.clientX;
+        y.value = event.clientY;
+    }
+    return {x,y}
+}