whats the difference by hot heload (webpack) and refresh the page (F5)

  • If i refresh the page this code:

    computed: {

    doesn’t get the value … but if i change something in my code its got the value. Strange, isn’t it?


  • You’re asking 2 different questions really.

    1. HMR vs F5:
      HMR will dynamically reload only the parts of your page that have its code changed since last save. This does not count as a reload, ie. will not reload your whole app, nor run any init code nor trigger created/mounted lifecycle events, unless the component or one of its parents has seriously changed). This partial reloading is why HMR will break your app for some kinds of code changes, and you then need a true reload (F5) to get it working again.

    2. In your case it seems instead of breaking it, HMR actually fixes your code. That’s rare.
      Oftentimes the order in which blocks of code are executed can make or break functionality. HMR is probably reloading, and thus re-executing, some piece of code that really needed to run later than what you originally planned (i.e. how it happens when you F5). Your issue may have nothing to do with this, but then again, it might help. And at least now you have an idea of what’s going on when you hit save.

  • thanks for you help @spectrolite !!
    i have another question to solve my case … my api is called in

    mounted () {

    and i get the user’s info to get the results by DB in

    computed: {

    so … i think that in life cycle vuejs mounts the component first and the computed() comes after … so, my api doest receive the value to bring the results and then mount the list correctly. what do you think?

  • don’t use computed, use a method instead and see what happens

  • So does the Vuex getter relies on the getListaEmailsFuncionais() call or how is the dependency between them?

    In general, avoid fetching data in the mounted hook and instead fetch it in the created hook, which is called way before.

    If you are using vue-router you can also use beforeRouterEnter to make sure the data is available when the route is entered.

Log in to reply