vue before create lifecycle hook

The vue before create lifecycle hook is the first of many hooks that fire throughout the lifecycle of a vuejs instance. It is in this hook that I would go about doing anything that I might want to happen before the data object is created in the created hook, and it is also the very first hook that fires in the lifecycle process of a vuejs class instance.

1 - Vue before create basic example

The vue create hook is the very first hook that fires, just before the created hook that will come after. Both the before create, and created hooks will fire synchronously so anything that might involve heavy lifting that is not delayed somehow, might cause this to hang a bot as a result.

In the body of the before create method the vue data object will be undefined, as this is not available until the created hook fires.

So here is some javaScript of a basic vue before create hook example in vuejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Vue({
el: '#demo-lifecycle-before-create',
template: '<p>n: {{ n }}</p>',
data: {
n: 42
},
beforeCreate: function () {
// the data object is not yet created
console.log(this.$data); // undefined
},
created: function () {
// the data object is not created
console.log(this.$data.n); // 42
}
});

And some hard coded html

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>vue before create lifecycle example</title>
<script src="/js/vuejs/2.6.10/vue.js"></script>
</head>
<body>
<div id="demo-lifecycle-before-create"></div>
<script src="basic.js"></script>
</body>
</html>

So this is a hook that I do not think I would use often, because there is not much to work with at this point, still if for some reason I want to do something before the data object of the vue class instance is even created for whatever the reason this is one way to go about doing just that.

2 - Hard coded object vue before create example

So here is another example that comes to mind. Although there is not much that can be done during the before create hook of the vue lifecycle, one thing that can be done is to append a plain old object to the vue instance.

So in this example I am creating a hard coded data object for the vue instance in the before create hook. The thing about the vue data object is that it contains the current state of a vuejs project model, but not any kind f hard coded initial state. So maybe the before Create hook would be a good place to create such an object, maybe not, In any case that is what I am doing here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
new Vue({
el: '#demo-lifecycle-before-create',
template: '<div><span>n:{{ n }} </span><br><span> mess: {{ mess }}</span></div>',
data: {
n: null,
mess: ''
},
// default create hook
beforeCreate: ()=> {
// define hard coded data object
this.hardData = {
n: 21,
mess: 'hard coded data is used'
};
},
// create hook
created: function () {
var self = this;
// fetch data
fetch('/data')
.then((res)=> {
return res.json();
})
.then((data)=> {
// if all goes well use that
self.$data.n = data.n;
self.$data.mess = 'Got data from back end';
})
.catch ((e)=> {
// else use hard data
self.$data.n = self.hardData.n;
self.$data.mess = self.hardData.mess + ' : ' + e.message;
});
}
});