Subscribe on changes!

function with bind will lose efficacy on template

avatar
Aug 30th 2022

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNqdkUtuwzAMRK9CaBMHaeT+VoYTtECPoY2tyo4S6wOKSheC714pbpOuiqI7kZw3hIaJvXrPz1GxhrVBovYEQVH0e2G18Q4JEqAaYIYBnYFVlq6Elc4GAoRdmVX3a2GHaCVpZ4HcOE7qrcNTtU7Iz90U1WYzC9vWi392zgUp46eOVK4AUsI5KwDaPhJlE3iRk5annWA3O8H20JOFh7ZeVBf0N4L32r5XdNBh/Q0//hmurszTfxbe8OcfeFtf/83u2BLw1nSeH4Oz+QSpbBBfgyBYA5dO6eXgSy3YgciHpq7DIMvhjoE7HOv84hgtaaO4Cmbbo/sICrOxYMUixzuz+RNeqKpX

Steps to reproduce

click btn1/2/3/4

What is expected?

3

What is actually happening?

4

System Info

No response

Any additional comments?

btn2 render

_createElementVNode("button", {
      onClick: _cache[0] || (_cache[0] = $event => (toggleDark.bind(this)))
    }, " btn 2"),

it should be

_createElementVNode("button", {
      onClick: _cache[0] || (_cache[0] = $event => (toggleDark.bind(this)()))
    }, " btn 2"),
avatar
Aug 30th 2022

This is expected behavior. We only invoke the handler when it's a property name/path, or it's a function literal.

avatar
Aug 30th 2022

但一个函数bind后还是字面量函数啊

而且从心智上讲 @click = "func" 和 @click = "func.bind()" 应该正常对待吧 我还是感觉这是一个bug点

avatar
Aug 30th 2022
 <button  @click="f"> btn 1</button>
  <button  @click="f.bind()"> btn 2</button>
  <button  @click="f()"> btn 3</button>
  <button  @click="f.bind()()"> btn 4</button>

而且从js语法上来看 这四种应该也是没区别的 vue也应该做出相应的回应吧 谢谢

avatar
Aug 30th 2022

或者至少应该在文档上提出这个坑

avatar
Aug 30th 2022

字面量是可以静态分析出来的,你说的是一个表达式,最后返回的是一个函数,这个不叫字面量。