如题，问了 gemini ，发现答案胡扯的，gemini 说写 onclick 不会触发 vue 响应式（ ref 元素修改），但是我实测在 div 上写:onclick 确实能触发响应式修改,所以我有点纳闷，这两种写法到底有什么区别
 |
1
BruceXu 9 小时 56 分钟前  1
我的 AI 解释得很清楚,可惜没法贴给你.
简单来说,前者是原生 html 的事件,后者是 vue 的事件.和响应式是两码事,都能触发. 一般是推荐用后者,走 vue 指令系统,可以多一些功能. |
 |
2
hengshenyu 9 小时 45 分钟前 via Android
:onClick 吧？ vue 支持将事件已 props 的形式传递（声明也是），onXxx = @xxx
|
 |
3
jspatrick 9 小时 44 分钟前
在 jsx 或 tsx 里只有 onClick 可以用，@click 是 onClick 的简写，vue 的 template 里一般用简写，响应式只跟定义的响应式变量有关，跟函数如何绑定无关，任意函数都可以触发响应式
|
 |
6
kakakakaka8889 9 小时 17 分钟前
没啥区别啊，@click 只是一个语法糖就是简化的 onClick 写法而已
|
 |
7
abc1310054026 9 小时 16 分钟前
对于 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 |
 |
8
FakerLeung 9 小时 6 分钟前 2
|
 |
10
zhengfan2016 OP @hengshenyu 这个是在 vue 的文档的哪里啊，我好像没在文档看到这个，我能看到的就是 @click 是 v-on:click 的语法糖 https://cn.vuejs.org/guide/essentials/event-handling.html#listening-to-events
|
 |
11
94 8 小时 40 分钟前
 好难猜啊，为什么这些可以用 `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#其他事件监听器机制) |
 |
12
shakukansp 8 小时 35 分钟前
|
 |
13
DICK23 8 小时 0 分钟前
vue 上应该是一致的，solidjs 中这两个写法一个是原生事件，一个是合成事件
|
 |
14
xiaoxi123 7 小时 47 分钟前
还是 微优易 黑魔法多啊🤔
|
 |
15
rich1e 7 小时 44 分钟前
其实楼上有几位的回答，基本都对上了，总结一下就是：
@click 是 Vue 封装的指令，是特有的语法糖。 - 在 .vue 文件的 <template> 里面直接使用； - @click 也可以写作 “v-on:click”； - @click 内部还封装了修饰符，e.g. '@click.stop' / '@click.once' 等等； onclick 属于 HTML 规范，跟 Vue 没关系。即便没有 Vue ，onclick 也可以工作。 多说一句，onclick 不是 onClick 。 如果想在 Vue 里面使用 onClick ，一般是指使用 jsx 编写代码，文件后缀通常为 jsx/tsx 。 当然，.vue 文件也可以写 jsx ，需要声明 `<script lang="jsx">` 或者 `<script lang="tsx">`。 PS：JSX (JavaScript XML) 是 JavaScript 的一种语法扩展，它允许你在 JS 代码中写出类似 HTML/XML 的结构化标记。 |
 |
16
Wanex 7 小时 18 分钟前
没区别，@click 就是 onclick 的语法糖
|
 |
17
tog 6 小时 58 分钟前
 一个是原生的，一个是 vue 封装的 估计好多人都没写过原生 html css js 吧。 |
 |
18
Ketteiron 6 小时 53 分钟前 3
我有个不相关的问题，这位老哥会被疯狂 @吗？
https://www.v2ex.com/member/click |
 |
19
superedlimited 6 小时 46 分钟前 via Android
@Ketteiron 看上面都没啥，看到这里绷不住了😂
|
|
21
hengshenyu 6 小时 20 分钟前 via Android
@zhengfan2016 没看到相关文档，这应该不是推荐用法，但是 UI 库里常见。
https://cn.vuejs.org/guide/components/attrs.html 这里隐式提了一下 @click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick ，我想 props emits 也是类似。 |
 |
22
AsuraTG 3 小时 39 分钟前
### 最佳实践建议
在 Vue 开发中， 永远不要使用 onclick ，原因如下： 1. 代码风格一致性 ：保持所有事件绑定都走 Vue 的系统。 2. 安全性 ：onclick 中的字符串代码容易引起 CSP (内容安全策略) 问题，也更容易导致 XSS 风险（如果你动态拼接字符串的话）。 3. 可维护性 ： @click 能够清晰地指向组件内部逻辑，利于代码阅读和重构。 唯一可能用到 onclick 的场景 ： 如果你正在集成某些非常古老的第三方库，或者需要在 Vue 挂载之前的极短时间内（例如 index.html 的 loading 状态）响应点击，才可能会用到原生 onclick 。但在 Vue 组件内部，请坚持使用 @click 。 |
|
24
zhengfan2016 OP |
Select Language