Vue技术问询：如何判断触发函数的事件或过渡钩子类型？

好问题！不管是普通DOM事件还是过渡钩子，都有办法精准判断到底是哪个触发了共用的处理器，咱们分两种场景来唠明白：

一、普通DOM事件（比如click/mouseover） #

当你把同一个方法绑定到多个DOM事件上时，Vue会自动把原生浏览器事件对象作为第一个参数传给你的处理器函数。你只需要读取这个对象的type属性，就能知道是哪个事件触发的了。

举个实际的例子，对应你给出的场景：

<template>
  <div @click="handler" @mouseover="handler">
    点我或者把鼠标移过来试试～
  </div>
</template>

<script>
export default {
  methods: {
    handler(event) {
      // 直接打印事件类型
      console.log(`触发的事件是：${event.type}`);
      
      // 也可以根据类型做不同逻辑
      if (event.type === 'click') {
        alert('你点击了这个div！');
      } else if (event.type === 'mouseover') {
        console.log('鼠标已经移到div上啦');
      }
    }
  }
}
</script>

这里的event就是原生的MouseEvent/PointerEvent对象，除了type，你还能拿到其他事件相关的信息（比如点击坐标、目标元素等）。

二、Vue过渡钩子（比如appear/enter） #

过渡钩子的参数和DOM事件不一样，它默认传递的是过渡元素和完成回调，并没有自带钩子名称。这时候最清晰的做法是在绑定钩子时手动传递额外参数，把钩子名称传进去。

比如你给出的过渡场景，我们可以这么改造：

<template>
  <transition appear 
    @appear="(el, done) => handler(el, done, 'appear')"
    @enter="(el, done) => handler(el, done, 'enter')"
  >
    <div v-if="isVisible" class="box">过渡效果演示</div>
  </transition>
  <button @click="isVisible = !isVisible">切换显示</button>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  },
  methods: {
    handler(el, done, hookName) {
      console.log(`触发的过渡钩子是：${hookName}`);
      
      // 根据钩子类型执行不同的过渡逻辑
      if (hookName === 'appear') {
        el.style.opacity = 0;
        setTimeout(() => {
          el.style.opacity = 1;
          done(); // 告诉Vue过渡完成
        }, 800);
      } else if (hookName === 'enter') {
        el.style.transform = 'translateX(-100px)';
        setTimeout(() => {
          el.style.transform = 'translateX(0)';
          done();
        }, 600);
      }
    }
  }
}
</script>

<style scoped>
.box {
  width: 200px;
  height: 100px;
  background: #42b983;
  transition: all 0.6s;
}
</style>

这里用箭头函数包装了一下处理器，把钩子名称作为第三个参数传进去，在handler里就能直接判断是哪个钩子触发的了。

总结一下 #

• DOM事件：利用自动传递的原生Event对象的event.type属性判断。
• 过渡/动画钩子：手动在绑定时传递钩子名称作为额外参数，在处理器中接收判断。

内容的提问来源于stack exchange，提问作者joemaller