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

zhengfan2016 · 2025-12-19 08:28:14 · 1365 次点击

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

举报· 1365 次点击
登录 注册 站外分享
12 条回复  
shakukansp 小成 2025-12-19 09:53:13
@zhengfan2016 渲染函数 & jsx 章节 v-on 的说明 以 on 开头,并跟着大写字母的 props 会被当作事件监听器。比如,onClick 与模板中的 @click 等价
94 初学 2025-12-19 09:48:21
https://i.imgur.com/agAJ0Rd.png 好难猜啊,为什么这些可以用 `v-bind` 绑定的事件都叫 [事件处理器属性]( https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes#事件处理器属性) 呢。 - [#其他事件监听器机制 | 事件介绍 - 学习 Web 开发 | MDN]( https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/Events#其他事件监听器机制)
zhengfan2016 楼主 小成 2025-12-19 09:47:23
@hengshenyu 这个是在 vue 的文档的哪里啊,我好像没在文档看到这个,我能看到的就是 @click 是 v-on:click 的语法糖 https://cn.vuejs.org/guide/essentials/event-handling.html#listening-to-events
battlefield 初学 2025-12-19 09:40:43
您可以在 play.vuejs.org 页面右边的 JS 标签下看到两种写法被编译后的结果。 @click: https://play.vuejs.org/#eNp9kE1LAzEQhv9KmJNC2SJ6KtviBz3oQUU9zmVJx23abBKSSV1Y9r+bpPTjUHoL7/NMeGcGeHKu2kWCGdRMndMN0wKNEPX6TjxKreR2jnBzO18MI4KYJlZPz0SYAAdpza9qq02wJv0z5HEEaTunNPkPx8qagDAThWTWaG3/3krGPtLkkMs1ye2FfBP6nCF8egrkd4RwZNz4lniPl9/v1Kf3EXZ2FXWyr8AvClbH3HGvPUezSrXPvNL2tXPWszLtT1j2TCYclspFszkWHyEd8+XK6qe699VDmUMzwvgP1lV+lw== onClick: https://play.vuejs.org/#eNp9kD1rwzAQhv+KuKmF4AztZJxAGzK0Q1vajlqMfHGUyJKQTo7B+L9HUsjHELKJ93l0vHcjvFlb9AGhhIqws6omXHLNWNXInpVGr5QU+wWHp+fFcpw4sHnE1fzGhRmQF0ZvZFvsvNFx1JgmcBCms1Kh+7YkjfYcSpZJYrVS5vCZM3IBZ+dcbFHs7+Q7P6SMw49Dj65HDhdGtWuRTnj994VDfF9gZ5qgov0A/qI3KqSOJ+096CbWvvFy24/OGkdSt/9+PRBqf14qFU3mlH0O8Z6rB6tf674Ur/kf1xNMR+tpf/g= 答案是没有区别。
FakerLeung 初学 2025-12-19 09:21:51
楼上叽里咕噜说啥呢,怎么扯到 jsx 上了 :onclick 就是原生 html 的 onclick="" 的绑定方式 --> 所有原生属性都可以通过 :xxxx 来绑定 @click 是 vue 的 :onclick 的语法糖,同时支持多个修饰符,可以快速实现一些功能,如 @click.prevent
abc1310054026 小成 2025-12-19 09:11:49
对于 html 元素来说如下所述: onclick => divElement.onclick @click => dicElement.addEventListener('click', ....) check this palyground: https://play.vuejs.org/#eNqNks1OAjEUhV/l2g2Q4BCiKzIQlZCoCzVK4qYbUu78QKdt+jOSTObdvZ0RZGGIu+k9XzvnnLZh98YkdUA2Y6kTtjQeHPpgFlyVldHWQwMWM2ghs7qCAaEDrrgSWjkPlcthHvXh4BGl1PCprdxeDUYRyYISvtQKio3aSlzKUuyHWI+g4QogHqAlJlLnNExEsBaVX29sjj7RSkSajmm5Sie9MbJEC4+VkRuPtAJIiynMfuA5Z2c/4mzRNJ2/tk0nxfSE3/0bLpUJHurrSm9R0gbSOYMJienkzAUbM+8oTVbmyc5pRU12ATkTujKlRPtqYg2Os1kfPWobauvruZt5G3B8nIsCxf6P+c4d4oyzN4sObY2cnTTfldbLq48XPND3SST3QRJ9QXxHuokQPfbYQ4jN2DOuc/vUvYdS5Wu3OnhU7hgqGo1k2/Gc0RtZXoj+a/cmue320TWz9hs3RtqA
kakakakaka8889 初学 2025-12-19 09:10:48
没啥区别啊,@click 只是一个语法糖就是简化的 onClick 写法而已
mengdodo 初学 2025-12-19 09:01:28
你不用 vue 且纯 html 也不加载 javascript 的情况下也能用 onclick ,但是 @click 只能 vue 下,懂了吧
crocoBaby 初学 2025-12-19 08:44:33
@click 会多一些修饰符的用法,例如一次触发,禁用默认事件等等
12下一页
返回顶部