When to Use the Lifecycle Method beforeMount in Vue. Js?
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...
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?
1 Answer
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=""></script>
<div id="app" data-fizz="buzz"></div>Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
