Version

3.0.11

Reproduction link

about:blank

Steps to reproduce

<div @click.self="fn" />

What is expected?

make them same

What is actually happening?

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", {
    onClick: _cache[1] || (_cache[1] = _withModifiers((...args) => (_ctx.fn && _ctx.fn(...args)), ["self"]))
  }))
}

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", {
    onClick: _withModifiers(_ctx.fn, ["self"])
  }, null, 8 /* PROPS */, ["onClick"]))
}

1. change (_ctx.fn && _ctx.fn(...args)) to _ctx.fn(...args), disallow _ctx.fn being falsy
2. or,
   1. change return fn(event, ...args); (in withModifiers) to return fn ? fn(event, ...args) : void 0;
   2. and,
      1. change (_ctx.fn && _ctx.fn(...args)) to _ctx.fn?.(...args), disallow _ctx.fn being false,
      2. or change (_ctx.fn && _ctx.fn(...args)) to _ctx.fn ? _ctx.fn(...args) : void 0, avoid when _ctx.fn is false, the dom event handler return false which will make side effects.