Vue.js 3中能否在事件处理器内调用匿名函数？

Vue.js 3中完全可以在事件处理器中使用匿名函数，你给出的写法无法运行是因为存在语法或逻辑错误，下面逐一分析并给出正确实现：

你的写法问题分析 #

1. 第一种写法

<button @click="return function() { console.log('test')}()">Click me</button>

• 问题：@click绑定的表达式无需return，且末尾的()会让匿名函数在页面渲染时立即执行，而非点击按钮时触发，因此点击按钮时已经没有可执行的逻辑。

2. 第二种写法

<button @click="() => { console.log('test') }">Click me</button> //ES6

• 问题：HTML属性值中不能包含//注释，这会导致整个表达式语法错误；去掉注释后，这个箭头函数写法本身是有效的，点击按钮会触发内部逻辑。

3. 第三种写法

<button @click="(function(){ console.log('Test'); })();">Click me</button>

• 问题：和第一种写法类似，末尾的()让匿名函数在页面渲染时立即执行，点击按钮时没有剩余逻辑可触发。

正确的匿名函数使用方式 #

箭头函数（推荐） #

单行逻辑可直接简写：

<button @click="() => console.log('test')">Click me</button>

多行逻辑用大括号包裹：

<button @click="() => {
  console.log('test');
  alert('点击触发了');
}">Click me</button>

普通匿名函数 #

也可以使用普通函数写法，注意不要在定义时立即执行：

<button @click="function() { console.log('test') }">Click me</button>

Vue.js 2中的情况 #

上述正确写法在Vue.js 2中同样适用，Vue对事件处理器中匿名函数的支持在两个版本中逻辑一致。你给出的错误写法在Vue.js 2中同样无法正常运行，问题根源和Vue 3中相同。

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