将无操作或空处理程序绑定到 Vue 事件处理程序？答案

【问题标题】：Binding no-ops or null handlers to Vue event handlers?将无操作或空处理程序绑定到 Vue 事件处理程序？
【发布时间】：2018-10-16 16:48:25
【问题描述】：

是否有定义空事件处理程序的 Vue 约定或最佳实践？

Vue 的transition 元素包含方便但容易被忽略的appear 属性。它默认使用转换的enter 钩子，但一组单独的appear 钩子也可用。我有一个案例，:appear 在:enter 触发一个函数时应该什么都不做。如果:appear 没有绑定，Vue 会回退到:enter，所以必须有一些东西。

将条件逻辑写入enter 钩子感觉不对，但我不确定如何最好地定义钩子。以下都是可行的，但如果没有 Vue 约定，应该将其视为最佳实践？

布尔属性

<transition
  appear
  v-on:appear
  v-on:enter="doEnter"
>

“空”属性

<transition
  appear
  v-on:appear=""
  v-on:enter="doEnter"
>

显式无操作处理程序

<transition
  appear
  v-on:appear="doAppear"
  v-on:enter="doEnter"
>

new Vue({
  //...
  methods: {
    //...
    doAppear: () => {}
  }
});

其他一些选项可能包括内联无操作函数v-on:appear="() => {}" 或使用空对象v-on:appear="{}" 或数字v-on:appear="0" 滥用JavaScript 的“一切都是函数”性质。 false 不起作用，因为布尔不是函数，Function 不起作用，因为 Vue 看到的是字符串而不是裸原型。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

除非你对它进行基准测试，否则我认为不会有太多明显的差异。

如果这对您很重要，您可以选择不使用 appear 处理程序，而是将动态对象传递给 v-on。

<transition ... v-on="transitionEventHandlers">

  data: {
    shouldUseAppearHandler: true
  },
  computed: {
    transitionEventHandlers() {
      let handlers = {
        enter: this.doEnter
      };
      if(this.shouldUseAppearHandler) {
        handlers = {
          appear: this.doAppear,
          ...handlers
        }
      }
      return handlers;
    }
  },
  methods: {
    doEnter() {
      console.log("enter");
    },
    doAppear() {
      console.log("appear");
    }
  }

示例：https://codepen.io/jacobgoh101/pen/aGVzjR?editors=1011

【讨论】：