Question

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

Vue的"DER" "000002"元素包含方便但易被忽略的transition属性。默认情况下，它使用转换的appear挂钩，但也可以使用一组单独的enter挂钩。我有一个案例，appear在:appear触发函数时不应该做任何事情。如果未绑定:enter，则Vue会回退到:appear，因此必须存在某些内容。

将条件逻辑写入:enter钩子感觉不对，但我不确定如何最好地定义钩子。以下所有工作，但如果没有Vue惯例，应该被视为最佳做法？

布尔属性

enter

＆＃34;空＆＃34;属性

<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: () => {} } });或滥用JavaScript＆＃34;一切都是函数＆＃34;具有空对象v-on:appear="() => {}"或数字v-on:appear="{}"的自然。 v-on:appear="0"无效，因为布尔运算不起作用且false无效，因为Vue看到的是字符串而不是裸原型。

Answer 1

除非你对它进行基准测试，否则我认为没有太大的明显区别。

如果这对您很重要，您可以通过将动态对象传递给appear来选择不拥有v-on处理程序。

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

JS

  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

将no-ops或null处理程序绑定到Vue事件处理程序？

1 个答案: