Explain different ways that props are treated in v3

[pikax]

In v3 v-on was merged with props, for that to happen props started with on* are treated as events

<Comp 
        @myEvent="log('myEvent')" 
        @my-event="log('my-event')"
        :onMyEvent="()=>log('onMyEvent')"
  />
  

<! -- CONVERTED TO  --> 
h(Comp, {
      onMyEvent: [
        _cache[0] || (_cache[0] = $event => (log('myEvent'))),
        _cache[1] || (_cache[1] = $event => (log('my-event'))),
        ()=>log('onMyEvent')
      ]
})

playground

You can also declare events as props

defineComponent({
  props: {
    onClick: Function, // similar to emit: ['click']
  }
})

[NataliaTepluhina]

@pikax honestly, I am torn a bit about giving the last example in the docs as we create "two ways of declaring emitted events" and the one with props is definitely less readable. I am open to discussion about this one :)

[pikax]

I agree, having multiple ways to describe something is not ideal, but I think we should acknowledge and explain how events and props are merged on v3, not recommend it, but at least explain in the advanced section to have it documented, because for example on he last example, the onClick is not always a function it can be an array of functions and the user must handle that.

EDIT: I see this as a being an unexpected behaviour to someone not knowing how the internals works