vue3.0学习记录(3)

watch 侦听器

比如点击按钮时，页面发生改变，并且改变网页的标题：

<template>
  <div>
    <h1>{{greetings}}</h1>
    <button @click="updateGreet">改变数据</button>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref,watch } from 'vue';

export default defineComponent({
  name: 'App',
  components: {
  },
  setup(){
    const greetings = ref('')
    const updateGreet = () => {
      greetings.value += 'Hello!'
    }
	//watch()第一个参数是响应式对象或者数组，第二个参数他有变化的时候要执行的函数体
	//回调函数中还有2个参数，分别指代新的值跟旧的值
    watch(greetings,(newValue,oldValue)=>{
      document.title = greetings.value
    })
    return {
      greetings,
      updateGreet
    }
  }
});
</scripr>

鼠标追踪器

因为可能在很多页面会使用，所以在src目录下新建一个公用的文件夹，在文件夹中新建一个ts文件

import { ref,onMounted,onUnmounted } from 'vue'
function useMouse(){
	const x = ref(0);
    const y = ref(0);
    const getMouse = (e: MouseEvent) => {
      x.value = e.pageX;
      y.value = e.pageY
    }
    onMounted(()=>{
      document.addEventListener('click',getMouse)       // 添加副作用，参数1是事件名称，参数2是函数
    })
    onUnmounted(()=>{
      document.removeEventListener('click',getMouse)       // 删除副作用，参数1是事件名称，参数2是函数
    })
    return {x,y}
}
export default useMouse

在vue文件中使用他

<template>
  <div>
    <h1>X：{{x}} Y：{{y}}</h1>
  </div>
</template>
<script lang="ts">
	import useMouse from './test/useMouse'
	export default{
		name:'App',
		setup(){
			const {x,y} = useMouse()
			return {
				x,
				y
			}
		}
	}
</script>