3

Summary:

This is ultimately a question about Vue.js(although I assume it applies to JavaScript in general).

First a bit of background: I noticed something in the Angular style guide which serves as a basis for the question about Vue.

Angulars style guide states to prefix custom event handler methods with on. https://angular.io/guide/styleguide#style-05-16

Question:

Back to Vue: Why would you name an event handler like this:

<CustomComponent @customEvent="onCustomEvent"/>

versus a more descriptive method name like this:

<CustomComponent @customEvent="setUserData" />
Brandon
  • 1,747
  • 2
  • 13
  • 22
  • Whenever a framework allows some degree of freedom, people start looking for "the right naming pattern". The right one is the one that makes sense to you and/or your team, because that one will increase your productivity and, ultimately, allow you to make money faster, as you won't have to ask yourself two weeks/months/years later: *"Hmmm... I wonder what this one does..."*. IMHO, your question is off-topic here, as it asks for opinionated answers. Besides, you're asking if you should use naming conventions of framework X while developing with framework Y. – tao Feb 03 '19 at 22:11
  • 1
    Imagine you'd read someone elses code and you'd see a method named `setUserData`. Would you know that this is an event-handler that expects some (specific) Event-Object as argument? I would assume that it is some kind of *setter* that takes some *UserData* and somehow *sets* it; and I'd try to use it that way. Whereas with `onClick` or `clickHandler`, to me it's immediately clear what this method is for; even if the name doesn't describe what is done in case of the event. – Thomas Feb 03 '19 at 22:21
  • 1
    In small scale apps it is almost irrelevant how you name your methods. In large and very large apps it rapidly becomes relevant, especially if more than 3 developers work on the same code. The more people in the team, the more important naming conventions are. It is ***absolutely irrelevant*** if canceling a routine was done by pressing the Cancel button, pressing the "X" in the corner or by a subsequent, more recent request. That's why the method should be named `\`cancel${actionName}\`` where `actionName` is relevant to the module's logic. – tao Feb 03 '19 at 22:29
  • @AndreiGheorghiu thank you for your feedback. – Brandon Feb 03 '19 at 22:37
  • @Thomas thank you. – Brandon Feb 03 '19 at 22:38
  • @AndreiGheorghiu as soon as your action is processing some arguments *(like an id or cancellation-token)* it gets quite relevant how you call that function. But I agree that it doesn't really matter what part of the code is calling the acton; as long as it is done right. IMO the right way would be to seperate the actions from the events that call them: like `onCustomEvent(e){ this.setUserData(...); this.cancelAction(); }` But I'd have to admit that most of the time I'm too lazy to do it "right". – Thomas Feb 03 '19 at 22:47
  • I have the same idea with u specially when I use Vue3. because it is not easy to make code clear with composition API. I wanna force event handle name with prefix on. So did you find any way to check this style like ESLINT? – JackChouMine Jan 12 '21 at 09:54

1 Answers1

3

You might need to do more than one thing in the handler.

In those cases it becomes hard to name the handler itself, so you just name the handler i.e handleClickEvent.

handleClickEvent: function() {
  this.setUserData()
  this.logClick()
  this.showNotification()
}

I've never used Vue but I've used Polymer which deals with element events as well and this is one of the cases where I forgo naming the handler something specific.

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
  • Thank you. This is what I was thinking; I thought maybe there was a naming convention that I couldn't find. – Brandon Feb 03 '19 at 22:45