请问 vue3 的 onclick 和 @click 有什么区别

3 天前
 zhengfan2016

如题,问了 gemini ,发现答案胡扯的,gemini 说写 onclick 不会触发 vue 响应式( ref 元素修改),但是我实测在 div 上写:onclick 确实能触发响应式修改,所以我有点纳闷,这两种写法到底有什么区别

3759 次点击
所在节点    Vue.js
24 条回复
hengshenyu
3 天前
@zhengfan2016 没看到相关文档,这应该不是推荐用法,但是 UI 库里常见。

https://cn.vuejs.org/guide/components/attrs.html 这里隐式提了一下 @click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick ,我想 props emits 也是类似。
AsuraTG
3 天前
### 最佳实践建议
在 Vue 开发中, 永远不要使用 onclick ,原因如下:

1. 代码风格一致性 :保持所有事件绑定都走 Vue 的系统。
2. 安全性 :onclick 中的字符串代码容易引起 CSP (内容安全策略) 问题,也更容易导致 XSS 风险(如果你动态拼接字符串的话)。
3. 可维护性 : @click 能够清晰地指向组件内部逻辑,利于代码阅读和重构。
唯一可能用到 onclick 的场景 :
如果你正在集成某些非常古老的第三方库,或者需要在 Vue 挂载之前的极短时间内(例如 index.html 的 loading 状态)响应点击,才可能会用到原生 onclick 。但在 Vue 组件内部,请坚持使用 @click
lizy0329
3 天前
回答都是啥玩意
@click 就是 onclick 的语法糖
@click.native 才是 dom 元素上的原生 click 事件
zhengfan2016
3 天前

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1179892

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX