在vue3中怎么实现鼠标，经过的地方留下相应的效果

在Vue 3中，你可以使用vue-directive来实现鼠标经过时留下相应效果。具体步骤如下：

1. 创建一个自定义指令，在指令中绑定鼠标移动事件和鼠标移出事件，同时获取鼠标的位置。

Vue.directive('hover', {
  bind: function(el, binding, vnode) {
    el.addEventListener('mousemove', function(event) {
      let x = event.pageX - el.offsetLeft;
      let y = event.pageY - el.offsetTop;
      el.style.setProperty('--x', `${ x }px`);
      el.style.setProperty('--y', `${ y }px`);
    });
    el.addEventListener('mouseleave', function(event) {
      el.style.setProperty('--x', '0');
      el.style.setProperty('--y', '0');
    });
  }
});

2. 在模板中使用自定义指令，并设置相应的CSS样式，使鼠标经过时留下相应的效果。

<template>
  <div v-hover class="hover-div">鼠标经过时留下相应的效果</div>
</template>

<style>
.hover-div {
  position: relative;
}
.hover-div::before {
  content: "";
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
}
</style>

这样，当鼠标在指定的元素上移动时，会在鼠标经过的位置留下一个红色的圆点。