How to use router component lifecycle hooks?

Karl_Marx_Lopez · March 15, 2018, 3:30am

How can I attach a lifecycle hook into the router component? I tried all possibilities, adding on the on property, adding on the router property.

nolimits4web · March 15, 2018, 4:11pm

github.com

framework7io/framework7/blob/master/kitchen-sink/pages/page-loader-component.html#L79-L98


// Lifecycle Hooks
beforeCreate() {
  console.log('componentBeforeCreate', this)
},
created() {
  console.log('componentCreated', this)
},
beforeMount() {
  console.log('componentBeforeMount', this)
},
mounted() {
  console.log('componentMounted', this);
},
beforeDestroy() {
  console.log('componentBeforeDestroy', this);
},
destroyed() {
  console.log('componentDestroyed', this);
},
// Component Data

VIEWSION · March 8, 2019, 6:38pm

Hey… what is this difference / advantage using Lifecycle Hooks compared to the typical “on” events?

nolimits4web · March 8, 2019, 8:37pm

Well, they have different lifecycle timestamps or not sure how to call it. Like there are no hooks for page:init, animation events. Hooks work with all components, e.g. Popup, Tab’s content, Panel, etc.

VIEWSION · March 9, 2019, 8:09am

Ok - thx… but let’s say you have a component page to perform some initial ajax requests. I can do this like:

...
created(){
    this.getData();
}, 
...

or

...
on: {
    pageInit: function (e, page) {
        this.getData();
    },
},
...

this is quite the same behavior, no? When do lifecycle timestamps matter? Can you give me an example when it is better to use lifecycle hooks instead of usual on events?

nolimits4web · March 9, 2019, 12:03pm

In this case there is no much difference. Just keep in mind that if you use some DOM operation in created hook, the component’s element is not yet in DOM