>[success] # 通過點擊獲取鼠標坐標 ~~~ 1.下面案例用了兩種方式一種是ref 定義響應一種是reactive，為了方便其實 在開發時候可以吧這些定義的'useMouseTracker' 方法放到hook文件下統一管理 ~~~ ~~~ <template> <div class="about"> {{x}} --- {{y}} {{x1}} --- {{y1}} </div> </template> <script lang="ts"> import { onMounted, onUnmounted, reactive, ref, toRefs, } from "vue" function useMouseTracker(){ const x = ref(0) const y = ref(0) const updatePosition = (e:MouseEvent) =>{ x.value = e.clientX y.value = e.clientY } // mounted 聲明周期注冊事件 onMounted(()=>{ document.addEventListener('click',updatePosition) }) onUnmounted(()=>{ document.removeEventListener('click',updatePosition) }) return { x, y } } function useMouseTracker1(){ const point = reactive({ x:0, y:0 }) const updatePosition = (e:MouseEvent) =>{ point.x = e.clientX point.y = e.clientY } // mounted 聲明周期注冊事件 onMounted(()=>{ document.addEventListener('click',updatePosition) }) onUnmounted(()=>{ document.removeEventListener('click',updatePosition) }) return toRefs(point) } export default { setup(){ const {x,y} = useMouseTracker() const {x:x1,y:y1} = useMouseTracker1() return { x,y,x1,y1 } } } </script> ~~~ * 放到文件中