函数表达式适合逻辑简单、一次性执行、无需复用或调试的事件处理场景，如开关切换、弹窗提示、临时状态更新等，可避免污染methods和全局命名空间，利用闭包捕获当前作用域变量。
函数表达式可以直接作为事件处理逻辑使用，不需要提前声明函数名，适合一次性、轻量级的交互响应。
什么时候适合用函数表达式写事件处理
当逻辑简单、只在当前事件中执行一次、不需复用或调试时，直接写函数表达式更简洁。比如开关切换、弹窗提示、临时状态更新等场景。
- 避免污染 methods 或全局命名空间
- 省去单独定义函数的步骤，模板更紧凑
- 能天然捕获当前作用域变量（闭包特性）
常见写法与注意事项
在 Vue 中常用 @click="() => doSomething()" 形式；原生 JS 则是 btn.onclick = function() { ... } 或 btn.addEventListener('click', () => { ... })。
- 箭头函数写法简洁，但注意 this 指向——Vue 模板中通常无影响，原生 JS 绑定到 DOM 元素时需留意
- 不要在函数表达式里写过长逻辑，超过三行建议提成 methods 中的命名函数
- 避免在循环中反复创建相同逻辑的函数表达式，可能引发内存或性能问题
和命名函数对比的关键区别
函数表达式是“值”，可赋值、传参、立即使用；命名函数是“声明”，有函数提升，可被多次调用和重用。
- 命名函数便于单元测试、调试断点、团队协作理解
- 函数表达式更适合做回调、事件监听、高阶函数参数
- Vue 的
v-on支持表达式和函数调用混合，例如@click="count++"或@click="() => visible = !visible"
实际例子参考
Vue 模板中：
<button> message = '已点击'>点我</button>
原生 JS 中：
document.getElementById('btn').onclick = function() { console.log('按钮被点了'); };
或更现代的写法：
el.addEventListener('click', () => handleAction('submit'));
