When to use the lifecycle method beforeMount in vue.js?

13,932

Best use case that I can come up with comes from Directly injecting data to Vue apps with Symfony/Twig. Before the mount happens, you can still see the actual, untransformed Element before it gets replaced by Vue. A particular piece that you can access is the data properties. In the example below, we lose data-fizz if we don't pull stuff out of it before we get to mounted.

const app = new Vue({
  el: "#app",
  data() {
    return {
      foo: "bar"
    };
  },
  template: "<div>{{foo}}</div>",
  beforeMount() {
    console.log(this.$el); // <div id="app" data-fizz="buzz"></div>
    console.log(this.$el.dataset.fizz); // buzz
  },
  mounted() {
    console.log(this.$el); // <div>bar</div>
    console.log(this.$el.dataset.fizz); // undefined
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" data-fizz="buzz"></div>
Share:
13,932

Related videos on Youtube

Simon Thiel
Author by

Simon Thiel

Loving Tech with a focus on JavaScript, React, Vue.js and Node.js

Updated on September 15, 2022

Comments

  • Simon Thiel
    Simon Thiel about 1 year

    I try to come up with an example when to use each Vue.js lifecycle hook. For beforeMount() I can't come up with any use case. While researching I have als read:

    Most likely we’ll never need to use this hook.

    Can someone provide an example when I would like to use this lifecycle hook?