Vue Transition组件appear场景下，空事件处理器的最佳实践？

嘿，这个问题我之前做项目时也碰到过，咱们一步步捋清楚～

能不能给Vue事件处理器绑定无操作/空函数？ #

完全可以！Vue对事件处理器的要求相当灵活，不管是内联写法还是组件里定义的方法，只要是个可执行的函数就行，空函数当然也没问题。

空事件处理器的约定与最佳实践 #

这里有几种常用的方案，你可以根据自己的场景选：

• 内联空箭头函数：最直观的写法，适合临时单次使用，比如@appear="() => {}"。唯一要注意的是，每次组件渲染时都会创建一个新的函数实例，不过对于非高频渲染的组件来说，这点性能影响几乎可以忽略不计。
• 组件内定义复用的空方法：如果多个地方需要用到空处理，在组件的methods里定义一个通用的空函数会更高效，比如：

  methods: {
    noop() {} // 就是啥也不做的空方法，起个语义化的名字更清晰
  }
  

  然后用@appear="noop"，这样每次复用的都是同一个函数实例，对性能更友好，代码也更整洁。
• 全局注册空方法：如果整个项目都经常需要用到空处理，可以在全局注册一个，比如在main.js里：

  Vue.prototype.$noop = () => {}
  

  之后所有组件都能直接用@appear="$noop"，省得每个组件都重复定义一遍。

针对你遇到的Transition Appear场景的解决方案 #

你说的这个场景特别典型：想让transition的enter钩子正常触发业务逻辑，但appear完全不执行任何操作。因为Vue的transition组件默认会在没指定appear钩子时，复用enter的逻辑，所以必须显式给appear绑定一个空处理来覆盖默认行为——这也是为什么你不绑定的话，appear会跟着enter一起跑的原因。

给你两种具体的实现方式，都比在enter里加条件判断要优雅得多：

方式一：内联空函数快速解决 #

直接在模板里写内联的空箭头函数，简单粗暴又有效：

<transition @appear="() => {}" @enter="handleEnter">
  <!-- 你的组件内容 -->
</transition>

<script>
export default {
  methods: {
    handleEnter(el, done) {
      // 这里写你的enter钩子逻辑
      // 别忘了最后调用done()来结束过渡哦
      done()
    }
  }
}
</script>

方式二：复用组件内的noop方法 #

如果你的组件里已经定义了noop空方法，直接拿来用就行，代码看起来更清爽：

<transition @appear="noop" @enter="handleEnter">
  <!-- 你的组件内容 -->
</transition>

<script>
export default {
  methods: {
    noop() {},
    handleEnter(el, done) {
      // 你的enter逻辑
      done()
    }
  }
}
</script>

这样就能完美实现appear啥也不做，只有enter触发指定函数的需求啦～

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