question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Establish consistent naming convention for all hooks in Vue

See original GitHub issue

In lifecycle methods and the transition system, before/after prefixes (with camelCase) seem preferred instead of pre/post. For consistency and also because “before” and “after” are probably more accessible to Vue’s non-native English speakers, perhaps postupdate should be renamed to afterUpdate.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:7
  • Comments:11 (11 by maintainers)

github_iconTop GitHub Comments

6reactions
yyx990803commented, Jun 29, 2016

I’d like to avoid big naming changes for the sake of API continuity, so the goal is

  1. consistency;
  2. as few changes as possible.

What I see right now that feels inconsistent are:

  1. postupdate hook in custom directives
  2. onEnter and onLeave for transitions

I think if we fix these we could settle on the following:

  1. present tense verb (bind, update, enter): indicates the user is implementing this hook to perform the specified action.
  2. past tense verb (created, mounted): indicates the action was performed by the framework and the hook is exposed for its timing.
  3. camelCase prefixed verb (beforeMount, afterEnter, enterCancelled): also indicates the action was/will be performed by the framework and the hook is exposed for timing purposes.

Based on these rules, the changes would be:

  1. postupdate -> componentUpdated

  2. onEnter -> enter, onLeave -> leave

    The reason I changed them to onEnter and onLeave in the first place was due to appear, which is a boolean, not a hook. However I think we can just determine the need for appearing transition simply by testing the presence of appear, afterApear and beforeAppear, and appear can either be true or an actual hook.

0reactions
yyx990803commented, Jun 30, 2016

Implemented in next branch.

Read more comments on GitHub >

github_iconTop Results From Across the Web

12 VueJS Best Practices for Pro Developers - LearnVue
Another naming convention is focused around naming base components – or components that are purely presentational and help setup common styles ...
Read more >
Style Guide - Vue.js
Prop names should always use camelCase during declaration, but kebab-case in templates and JSX. We're simply following the conventions of each language. Within ......
Read more >
Introduction to Vue lifecycle hooks - LogRocket Blog
It is inside them that Vue components are created and exist, these functions are called lifecycle hooks. There are eight lifecycle methods:
Read more >
VueJS component style guide | Codementor
Vue.js provides all Vue handler functions and expressions are strictly bound to the ViewModel. Each component events should follow a good naming ......
Read more >
Create a Basic useFetch Hook in Vue.js | by Wendy de Kock
We start by creating our useFetch function, since it's a hook we'll start our function name with 'use' as convention dictates. Next, we...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found