How to implement a function when a component is created in Vue?

Question

According to the docs, the constructor of the Vue object is managed like this.

var vm = new Vue({
  created: function () { console.log("I'm created!"); }
});

However, I can't figure out how to do the corresponding thing when a Vue component is created. I've tried the following but don't get any print to the console.

export default {
  created: function() { console.log("Component created!"); }
}

Is it possible to subscribe/listen to a component being rendered? I'd like to react to that event by downloading some data and putting it in the store, so that the table that the component carries will get its information to display.

Solution 1

In my applications, I tend to use the mounted hook to load up some Ajax data once the component has mounted.

Example code from my app:

Vue.component('book-class', {
    template: '#booking-template',
    props: ['teacherid'],
    data: function () {
        return{
            // few data items returned here..
            message: ''
        }
    },
    methods: {
        // Few methods here..
    },
    computed: {
      // few computed methods here...
    },
    mounted: function () {


        var that = this;
        $.ajax({
            type: 'GET',
            url: '/classinfo/' + this.teacherid,
            success: function (data) {
                console.log(JSON.stringify(data));

            }
        })
    }
});


new Vue({
    el: '#mainapp',
    data: {
        message: 'some message here..'
    }
});

However, I can also use created() hook as well as it is in the lifecycle as well.

In Vue2 you have the following lifecycle hooks:

Solution 2

components doesn't have life cycle hooks like app. but they has something similar. that fixed my problem: https://vuejs.org/v2/api/#updated

Comments

[Konrad Viltersten]

That's only applicable upon creation/hookation of the Vue main component. I'm looking for a way to do stuff when a component (any component, part of or child to) is created/imported. Still +1 for the effort with the code. Also, I'd remove the image and just link to it. It's awesomely helpful but ouch so looong.

[Konrad Viltersten]

Ahem... What would you say about the picture above that shows life cycle of an component? AM I missing something here?

[Milan MiNo Michalec]

@KonradViltersten picture above is lifecycle of app not lifecycle of component. Comenents doesn't have those hooks...