Vue模板中调用函数应通过事件绑定（如@click="handleClick"）或插值表达式（如{{ formatPrice(price) }}），复杂逻辑须移入methods或computed，禁用内联语句、箭头函数及异步/副作用操作。

在 Vue 模板中调用函数，核心是通过事件绑定（@click、@input 等）或插值表达式（{{ }}）触发，但必须注意：模板中只应写**简单调用或内联表达式**，复杂逻辑务必移入 methods 或 computed。

事件处理中调用函数（推荐方式）

使用 v-on（简写为 @）绑定 DOM 事件，直接调用 methods 中定义的方法：

• ✅ 正确写法：@click="handleClick" —— 调用 methods 里的 handleClick 方法
• ✅ 带参数：@click="handleClick(item.id)" 或 @click="handleClick($event, item)"
• ⚠️ 避免内联语句：@click="count++" 或 @click="doA(); doB()" —— 可读性差、难以测试、破坏响应式追踪
• ? 小技巧：$event 是原生事件对象，显式传入才能在方法中访问；若省略，Vue 会自动注入第一个参数

插值中调用函数（谨慎使用）

在 {{ }} 中可调用无副作用的函数（如格式化、计算展示值），但需满足：

• ✅ 纯函数：不修改响应式数据、不发起请求、不触发副作用
• ✅ 有缓存价值时优先用 computed：比如 {{ formatPrice(price) }} 若 price 不变，formatPrice 仍会每次执行；改用 computed 更高效
• ❌ 禁止在插值中调用异步函数或修改 state：{{ fetchUserData() }} 会导致无限请求或警告

避免在模板中写箭头函数或匿名函数

以下写法看似简洁，实则隐患大：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• ❌ @click="() => { console.log('bad'); }" —— 每次渲染都新建函数，导致子组件无法正确复用或 diff
• ❌ @click="item => deleteItem(item)" —— 同样创建新函数，且 this 绑定易出错
• ✅ 正确替代：在 methods 中定义 deleteItem(item) { ... }，模板中写 @click="deleteItem(item)"

进阶：结合修饰符与方法参数的规范写法

修饰符（如 .prevent、.stop）应与方法调用配合清晰，不混用逻辑：

• ✅ 推荐：@click.prevent="handleSubmit" —— 阻止默认行为，逻辑在 handleSubmit 内统一处理
• ✅ 需要动态判断时：@click="onItemClick($event, item)"，方法内用 $event.preventDefault()
• ❌ 避免：@click.prevent="handleSubmit(item)" —— 修饰符和参数混合易引发理解偏差，也不利于单元测试

模板不是 JavaScript 执行环境，它的职责是声明“什么事件触发什么行为”，而非“如何实现”。把函数调用写清楚、把逻辑收进 methods、把派生状态交给 computed，Vue 应用才更健壮、可维护、易协作。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！