watch和watchEffect的区别

watchEffect

会自动收集依赖
他会在最开始时执行一次收集依赖
watchEffect监听reactive对象是不起作用的，只能监听对象中的具体属性。 watch
需要指定监听对象
惰性，只有值发生变化才会执行（如果没有设置第三个参数immediate）我目前总结出来的只有这些，欢迎补充

今天分享一下在setup中用hooks，当然vue是没有hooks的，只是比较相似

先做一个小demo，我们获取浏览器的鼠标位置，并且在右下角显示

获取鼠标坐标

我们先分析，首先获取鼠标坐标我们可以监听mousemove事件，用event.pageX(Y)拿到

直接上代码

//js中
setup() {
    const mouseX = ref(0)
    const mouseY = ref(0)
    document.addEventListener("mousemove",(e)=>{
      console.log(window.mouseY);
      mouseX.value = e.pageX
      mouseY.value = e.pageY
    })
    return {
      mouseX,mouseY
    }
}

看一下我们的页面展示

没有问题，但是我们想一下，这只是我们的一个功能代码，如果我们有好几个呢，

我们在有一个点击按钮，每点一下，值加一，并且展示到页面一个页面的功能有很多，如果都写在一起们就显得非常的混乱，此时就引出我们的hooks，当然这只是社区的叫法

hooks

现在我们要把代码抽出出来，单独放在一个文件中，命名为useMousePosition

在useMousePosition文件中，暴漏出去一个函数，把我们需要的值和方法return出来

useMousePosition文件中

import{ ref } from 'vue'       //引入ref
export default function(){
    const mouseX = ref(0)
    const mouseY = ref(0)
    document.addEventListener("mousemove",(e)=>{
      console.log(window.mouseY);
      mouseX.value = e.pageX
      mouseY.value = e.pageY
    })
    return {
        mouseX,mouseY
    }
}

我们现在只创建了，但是还没有在setup中引用

setup中
import useMousePosition from './useMousePosition'
export default {
  setup() {
    const {mouseX,mouseY} = useMousePosition()       //执行函数，返回mouseX,mouseY
    return {
      mouseX,mouseY
    }
  }
}

在setup中引用后，再看浏览器效果

同样可以执行，有的小伙伴可能会疑惑，这样岂不是很费时间，还得创建一个文件，确实是这样，但是一旦我们后续出现bug，我们就可以快速定位到bug点，不然一坨代码，一点一点得找到什么时候，同样也能避免留下来屎山，你接手一坨是啥感觉，对吧，大家都好好写，以后都好

好了，到此结束

结束

谢谢观看，麻烦点个赞😉

Vue3语法糖setup（三）

watch和watchEffect的区别

获取鼠标坐标

hooks

结束