vue中点击事件click加括号和不加括号的区别

2024-04-07
7933 分钟
...

官方说法:

    在Vue中,使用@click指令来监听元素的点击事件,并执行相应的方法。区分不同的点击事件可以通过传递不同的方法名或方法名后面添加一对小括号来实现。

区别:
1. @click="comfors":这是一个简单的绑定事件语法,当元素被点击时,会调用comfors方法。
2. @click="comfors()":这是在点击事件上调用方法的语法,当元素被点击时,会立即执行comfors方法。

3.@click="comfors"表示将点击事件绑定到组件中的名为"comfors"的方法上。这意味着当用户点击相关的元素时,会执行该方法。

4.@click="comfors()"表示在组件渲染时就立即执行名为"comfors"的方法,并将其返回值绑定到点击事件上。换句话说,点击事件被触发时,不会再次执行该方法。

总结来说,区别在于是否在组件渲染时就执行方法以及方法的返回值。使用@click="comfors"会在点击事件触发时执行方法,而使用@click="comfors()"会在组件渲染时就执行方法并将其返回值绑定到点击事件上。

但是说实话是这样但是也就是背八股文的时候是这样,其实实际使用起来差距不大就比如:

实际开发中其实这两个的区别主要是对于事件对象参数event的处理,我们看两个实例:

我们发现同样是没有传入参数,但是comfors显示的参数对象是MouseEvent显示的是鼠标的x和y轴的位置,但是comfors()显示的是undefined。

接下来传入参数看看是什么效果:

我们会发现当传入id传入值时,comfors()就输出多少。

总结:comfors与comfors()的区别主要是对事件对象参数event的处理,当comfors()必须手动写参数$event才能获取事件对象,而comfors默认第一个参数对象是MouseEvent。

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
vue2025-10-22
shallowRef 与 ref 的区别、场景与坑位
结论先行: 会 深度 地把你放进去的对象转成响应式(递归代理),因此"对象内部的改动"也会触发视图更新。 只在 顶层 做依赖追踪: 更换 才触发更新 ;若你只是"在原对象上改属性",不会触发,除非手动 。 1\. 快速对比 维度 追踪粒度 深度(递归) 仅顶层 对象内部属性变更 会触发更新 不会 触发(除非 或重新赋值) 性能 有递归 & 依赖跟踪开销 更轻量,适合大对象/第三方实例 适用对象 普通标量、普通对象、数组 第三方实例(图表...
学习面试
vue2025-10-20
Vue 3 中的 setup执行时机与异步逻辑详解
Vue 3 中的 执行时机与异步逻辑详解 本文详细介绍 Vue 3 组合式 API 的核心函数 :它在组件生命周期中的执行时机、异步行为( 的影响)、常见用法和最佳实践。 一、 的执行时机 是 Vue 3 组件实例创建后、渲染前执行的函数。 它相当于 Vue 2 中的 和 的合体。 执行流程: 也就是说: 所有响应式数据( 、 、 )都在这里定义; 所有生命周期钩子( 、 等)都在这里注册; 模板渲染会等待 执行完成(或异步返回的 Pr...
学习面试
vue2025-10-08
vue中ref与reactive
Vue 3 的 与 :区别、实现,以及为什么更推荐 1\. 一句话结论 :适合 原始类型 或 独立、细粒度 的状态单元;类型推断明确、解构安全、追踪粒度更小, 默认首选 。 :适合管理 对象/集合 这类结构化状态;但 解构会丢失响应性 , 默认 非深度 ,需要正确的使用姿势配合。 2\. 用法与语义差异 2.1 基本示例 2.2 模板中的解包(unwrapping) 在 模板 里, 会 自动解包 ,可直接写 ,不必 。 在响应式对象中...
学习面试
vue2025-09-23
Vue3 中computed属性依赖总结
Vue3 属性依赖总结 1. 依赖收集机制 的 getter 内部 读取 到哪些响应式变量 ( / ),就会把这些变量收集为依赖。 当这些依赖发生变化时, 会重新计算。 2. 如果只返回常量 始终是 。 修改 或 不会触发 重新计算,因为 getter 内没有访问它们。 3. 如果访问了响应式变量但仍返回常量 初始化时会打印一次。 当 或 改变时,getter 会重新执行(再次打印),因为它们被收集为依赖。 但 依旧始终是 。 4. 总...
学习面试
vue2025-09-17
template标签为什么不可以使用v-show
前言 写 Vue 时,最容易踩的小坑之一,就是给 套一个 。编辑器不报错,页面却“消失”了。很多人以为这是 bug,其实它只是 Vue 的底层设计在默默提醒: 不是真节点,它只是个“草稿纸”。 一、为什么 拒绝 v show 的本质是切换元素的 CSS: 。浏览器要找到真实 DOM 节点,才能给它加样式。而 在运行时会被完全剥离,不会留下任何标签,Vue 找不到节点,也就无处下刀。 举个反面教材: 打开控制台,你会看到 还是生成了,但...
学习面试
vue2025-09-17
Vue 3中watchEffect自动追踪详解
Vue 3 自动追踪详解 一、是什么 是 Vue 3 Composition API 提供的一个响应式副作用(side effect)函数。 它会 立即执行一次回调函数 ,并且在回调函数中访问到的所有响应式数据(ref、reactive、computed 等)都会被 自动追踪 。 当这些依赖的响应式数据发生变化时,回调会重新执行。 简单理解: 能“自动发现”它用到的响应式变量,不需要手动指定依赖。 二、基本用法 特点: 第一次立即执行...
学习面试

评论

请登录后发表评论

去登录
加载评论中...