App.vue 文件代码如下：

<template>
  <img alt="Vue logo"
       src="./assets/logo.png">
  <h1> {{count}} </h1>
  <h1> {{double}} </h1>
  <h1> {{greetings}} </h1>
  <h1> X: {{x}}, Y: {{y}} </h1>
  <button @click="increase"> 👍+1 </button>
  <button @click="updateGreeting"> Update Title </button>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  reactive,
  toRefs,
  watch
  // onMounted,
  // onUnmounted
} from 'vue'
import useMousePosition1 from './hooks/useMousePosition1'

interface DataProps {
  count: number
  double: number
  increase: () => void
}

export default defineComponent({
  name: 'App',
  setup() {
    const data: DataProps = reactive({
      count: 0,
      increase: () => {
        data.count++
      },
      double: computed(() => data.count * 2)
    })
    const { x, y } = useMousePosition1()
    const greetings = ref('')
    const updateGreeting = () => {
      greetings.value += 'Hello!'
    }

    watch([greetings, () => data.count], (newValue, oldValue) => {
      console.log(newValue)
      console.log(oldValue)
      document.title = 'updated' + greetings.value
    })
    const refData = toRefs(data)
    return {
      ...refData, // 展开后为 count, increase, double
      greetings,
      updateGreeting,
      x,
      y
    }
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/hooks 目录下新建 useMousePosition1.ts 文件的代码如下：

// import { reactive, toRefs, onMounted, onUnmounted } from "@vue/reactivity";
import { reactive, toRefs, onMounted, onUnmounted } from 'vue'

function useMousePosition1() {
	const xyPosition = reactive({
		x: 0,
		y: 0,
		updateMouse: (e: MouseEvent) => {
			xyPosition.x = e.pageX
			xyPosition.y = e.pageY
		},
		onMounted: () => {
			document.addEventListener('click', xyPosition.updateMouse)
		},
		onUnmounted: () => {
			document.removeEventListener('click', xyPosition.updateMouse)
		}
	})
	const refxyPosition = toRefs(xyPosition)
	refxyPosition.x
	refxyPosition.y

	// return { refxyPosition.x,  refxyPosition.y }
	return { x: refxyPosition.x,  y: refxyPosition.y }
}

export default useMousePosition1

想必是钩子函数在reactive中的用法错了，请老师指教。