Lifecycle hooks TS definitions lexical scope question


I am working on a vue.js plugin which I hope to release within the next few weeks and I have stumbled upon something that confuses me.

When dealing with lifecycle hooks in a component, this seems to always point to the component itself, and runtime console.log() calls do seem to confirm it (I ran the calls from beforeCreate and created to test it. Despite that, the only lifecycle interface definition which specifies (this: Vue) seems to be the beforeCreate hook. All others do not specify it. Because of a couple of things I am doing, this means that the only hook that is behaving as expected is beforeCreate: when I invoke the hook and use the this keyword I am able to access any new property of the component itself. All other lifecycle hooks seem to be scoped to the component options object instead, which means I’m having to add (in both definitions and actual code) a reference to this new property I need in both the component options and the component typeof Vue generic.

Is there anyone who can help me understand why these hooks are typed differently if in fact their lexical scope is the same? What am I missing here?

Thank you.

I’m not sure I can entirely follow you without any code samples or links to the code that you talk about, and also, the Typings for Vue options objects are insanely complicated internally, so I can#t claim to even fully understand them. but:

In principle beforeCreate is different from the other lifecylce events because it runs before all of the properties specific to this component have been added to the instances.So the instance, at that moment, only contains properties defined by Vue in general ($emit() and other “global” properties and methods)

In all of the other lifecycle methods,this technically refers to the same object, but it now contains a lot more properties, namely those specified for this very type if component:

  • Properties added from props
  • properties added from data
  • properties added from computed
  • methods from methods


So this isn’t of type Vue anymore, it is an extended Version of Vue that is calculated by the TS compiler dynamically from the properties that you defined in the component options.q