on 还是 @ - Vue template 里事件名的正确姿势？

2023-12-03 21:26:21

@ 和 on：Vue 中事件绑定的细微差别

在 Vue 中，事件绑定是至关重要的，它允许我们响应用户交互并更新应用程序的状态。Vue 提供了两种绑定事件的方法：@ 和 on。虽然这两个指令都能实现同样的目的，但它们之间存在一些细微的差别，了解这些差别对于编写高效的 Vue 代码非常重要。

语法区别

@ 和 on 在语法上略有不同。使用 @ 绑定事件时，只需在事件名前面加上 @ 符号即可。例如：

<button @click="handleClick">点我</button>

使用 on 绑定事件时，需要在事件名前面加上 on: 前缀。例如：

<button on:click="handleClick">点我</button>

虽然 @ 比 on 更简洁，但 on 更易于阅读，尤其是在处理多个事件时。

优先级区别

当同时使用 @ 和 on 绑定同一个事件时，@ 绑定的事件会优先触发。这是因为 @ 绑定的事件被视为原生事件，而 on 绑定的事件被视为自定义事件。

<!-- 同时使用 @ 和 on 绑定同一个事件 -->
<button @click="handleClick" on:click="handleCustomClick">点我</button>

在这个例子中，当点击按钮时，handleClick 函数会优先触发，然后 handleCustomClick 函数才会触发。

最佳实践

在 Vue 中，通常建议使用 @ 来绑定事件。这不仅是因为 @ 更加简洁，而且是因为 @ 绑定的事件会优先触发。

如果需要绑定自定义事件，则可以使用 on 来绑定。

ESLint 插件实现

为了确保 Vue template 里事件名的正确性，我们可以创建一个自定义 ESLint 插件。这个插件可以检查 template 里事件名的格式，并给出相应的错误提示。

// eslint-plugin-vue-template-event-name.js
module.exports = {
  rules: {
    'vue/template-event-name': {
      meta: {
        type: 'problem',
        docs: {
          url: 'https://github.com/eslint-plugin-vue-template-event-name'
        }
      },
      create: function (context) {
        return {
          VElement: function (node) {
            if (node.events) {
              for (const event of node.events) {
                if (event.name.charAt(0) !== '@') {
                  context.report({
                    node: event.name,
                    message: '事件名应以 @ 开头'
                  })
                }
              }
            }
          }
        }
      }
    }
  }
}