请问在绑定事件时如何避免被转换成箭头函数

[zzx18023]

@click="useThrottleFn(clickFn, 500)" 会被转换成 @click="$event=>useThrottleFn(clickFn, 500)"，
请问如何阻止这种转换发生。

https://sfc.vuejs.org

[edison1105]

无法避免。

[liulinboyi]

@click="useThrottleFn(clickFn, 500)" 会被转换成 @click="$event=>useThrottleFn(clickFn, 500)"， 请问如何阻止这种转换发生。

https://sfc.vuejs.org

Why you need to avoid this trasnform @click="useThrottleFn(clickFn, 500)" to @click="$event=>useThrottleFn(clickFn, 500)"? What is your reason or what you want to do? Thanks!

[jyk0011]

好像也没有什么影响，如果一定要去掉的话，敲完click之后，手速快一点，就可以不出现了。

[Justineo]

我感觉你说的是 Volar 的 Inlay Hints 功能……这个不会改变你的源码，只是给你显示一下。你不需要的话可以在扩展的配置里面禁用掉。

[lincenying]

如果你说的是这个话, 那么对你代码没有任何影响, 提示框上也有关闭这个的方法

[mekefly]

我知道你说的是什么意思

1. 我猜你只是觉得这个显示很烦人

这个是volar插件的功能，如果你想关闭显示的话你可以在 vscode settings.json中添加以下行

"volar.inlayHints.eventArgumentInInlineHandlers": false

2. 你想避免编译时转换

实际上vue在这个位置简化了你的代码

1. 如果在这个位置传入了一个函数，那就是将函数作为事件监听函数
2. 如果你只传输了一个语句，那就会自动转换为箭头函数

一个基本的监听，它可能是这样的

<script setup>
function handleClick(){
}
</script>
<template>
  <div @click="handleClick"></div>
  <!-- 编译后可能是这样的 
    {
      onClick:  $setup.handleClick
    } 
  -->
</template>

同样的如果你需要传入一个值的话，你可能会这么写

<script setup lang="ts">
const list = ref([
  { id: 0, text: "0" },
  { id: 1, text: "1" },
]);
function handleClick(id: number) {}
</script>
<template>
  <!-- 以下方二种写法表现上应该是一样的 -->
  <!-- 写法一 -->
  <div v-for="item in list" :key="item.id" @click="handleClick(item.id)">
    {{ item.text }}
  </div>
  <!-- 编译后可能是这样的 
    {
      onClick:  ($event) =>$setup.handleClick(item.id)
    } 
  -->

  <!-- 写法二 -->
  <div v-for="item in list" :key="item.id" @click="() => handleClick(item.id)">
    {{ item.text }}
  </div>
  <!-- 编译后可能是这样的 
    {
      onClick:  () =>$setup.handleClick(item.id)
    } 
  -->
</template>

至于如何避免添加 ($event) =>的自动添加，我觉得可能没必要

你的需求可能是这样的

function createHandleClick(id: number) {
  //you logic 1
  return ()=>{
    //you logic 2
  }
}

当然上面代码可能是没必要的，因为这只是一个假设
你觉得需要监听click的是logic 2,logic1只想让它执行一次，
那么假如编译后，代码没有经过改变，也是不行的，因为render函数在每次更新后，
都会执行一次，你想要让它只执行一次的想法落空了

那么如何解决这个问题呢
可以这么写

<script setup lang='ts'>
  const cacheList: Record<string|number,any> = {}
  function getHandleClick( id:number ){
    return cacheList[id] || (cacheList[id] = createHandleClick(id))
  }
</script>
<template>
  <div v-for="item in list" :key="item.id" @click="() => getHandleClick(item.id)">
    {{ item.text }}
  </div>
</template>

你可能觉得上面写法相当麻烦，没事你可以抽离逻辑

  const cacheList: Record<string|number,any> = {}

   function cache(key:string,fn:()=>any){
     return cacheList[key] || (cacheList[key] = createHandleClick(id))
   }
  function getHandleClick( id:number ){
    return cache(String(id),()=>createHandleClick(id))
  }

其实我的解答不需要这么复杂

1. 我认为做不到，vue已经帮我们做了选择，虽然某些时候，变的不好用了，但是也有一些时候变得更好用了
2. 你上面代码有bug，use开头的都需要写到setup里面，这是一种规范，你既然问出了这个问题，你应该意识到了第二个bug，clickFn没有执行,这个就是我上面所讨论的这个问题导致的
3. 哪怕上面代码按照你的想法运行了，你的代码依然会出现bug，渲染函数，随时可能更新，导致异常的防抖失效

[zzx18023]

非常感谢你的回答，你是完全看明白我问的问题的。没错我就是要做一个列表数据的操作按钮的节流，并且每条数据相互独立计时器。

[mekefly]

不客气，这种需求的话，我是建议创建新组件就能按照vue的方式解决，我也觉得缓存这样写不好看，用组件的话，相当于vue作了缓存