VueJs best practices ✓
Hello fellow Devs!
After researching for a while in the VueJs docs and the web, I’ve created a list of best practices and style guides for a more correct or commonly accepted way of using VueJs.
The points below are some of them functionality/optimisation related, others are VueJs naming conventions and element ordering. More detailed information can be found in the links in the summary.
Clear event listeners on component destroy with $off
When listening to events with $on, we should always remember to remove that listener with $off on destroyed(). This prevents us from having memory leaks.
Always use kebab-case for event names
When emitting/listening to custom events, we should always use kebab-case. Why? Because the events will be transformed automatically into lowercase anyway,. We won’t ever be listening to an event in camelCase or PascalCase, therefore, makes more sense to declare the event the same way we’re going to listen to it: in kebab-case.
// Emitting
this.$emit('my-event') // instead of myEvent// Listening
v-on:my-event