Vue模板中调用函数应遵循“模板只声明触发点，逻辑收进methods或computed”原则：事件绑定推荐@click="handleSave"或@click="deleteItem(id)"，禁用内联语句和箭头函数；插值中仅允许无副作用的纯函数如{{formatPrice(price)}}，严禁请求或状态修改。
Vue模板中调用函数，关键不是“能不能写”，而是“该不该在模板里写、怎么写才安全稳定”。核心原则是：模板只负责声明行为触发点，逻辑必须收进 methods 或 computed，禁止把业务逻辑塞进插值或事件绑定的内联表达式里。
事件绑定调用（最常用、最推荐）
用户交互类操作统一走 @click、@input、@submit 等指令绑定，直接指向 methods 中已定义的方法：
- ✅ 正确：
@click="handleSave"—— 方法名不带括号，由 Vue 自动调用 - ✅ 带参数：
@click="deleteItem(item.id)"或@click="editUser($event, user)"，参数可传响应式数据或原生事件对象 - ❌ 避免：
@click="count++"、@click="doA(); doB()"—— 模板不是脚本执行区，这类写法无法被 Vue 的响应式系统追踪，也难以调试和测试
插值中调用（仅限纯展示逻辑）
{{ }} 里允许调用函数，但仅限无副作用、不修改状态、不发请求的格式化或计算函数：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- ✅ 合理：
{{ formatPrice(price) }}、{{ formatDate(createTime) }}—— 输入确定，输出确定，不影响组件状态 - ⚠️ 注意性能：
formatPrice每次渲染都会执行；若依赖的数据不变，建议改用computed缓存结果 - ❌ 严禁：
{{ fetchUserData() }}、{{ this.loading = true }}—— 会引发无限重渲染、警告甚至崩溃
禁用箭头函数和匿名函数写法
看似简洁的内联函数实际破坏 Vue 的响应式更新和子组件复用机制：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
@click="() => confirmDelete(id)"—— 每次渲染都新建函数，导致子组件 key 失效、diff 异常 - ❌ 危险：
@click="item => api.delete(item.id)"——this绑定丢失，且无法在 methods 中统一拦截错误或加 loading - ✅ 正确：在
methods中定义完整方法，模板中只写方法名或带参调用
修饰符与参数配合要清晰
事件修饰符（如 .prevent、.stop）应与逻辑解耦，避免混合使用造成语义模糊：
- ✅ 推荐：
@click.prevent="handleSubmit"—— 默认行为阻止 + 业务逻辑分离，方法内部专注处理提交 - ✅ 动态判断：
@click="onItemClick($event, item)"，然后在方法里手动调用$event.preventDefault() - ❌ 混淆：
@click.prevent="handleSubmit(item)"—— 修饰符意图和参数传递混在一起，不利于单元测试和后续维护
