Vue.extend and constructor chain

[druppy]

First, thanks for sharing this really nice and powerful tool !

I have tried to make use of ES6 or Typescript classes for new components, especially to gain some static testing for TS. I have played with the vue-class-decorator, and it all seems quite OK, except for one thing, the constructor chain.

class TestComp extends Vue {
   n = 42;
   constructor() {
      console.log( "we never end here, and this ", n, " is undefined" );
   }
   data() {return{ "test":42};}
}

var i = TestComp.extend({template:'<div>{{test}}</div>'});

This is, in the eyes of Vue, what the decorator does (in addition, it moves some functions and data around, but that is beside the point), when defining new components.

But in order to make this work as a normal class, we need to be able to call the constructor of the classes, and when this is done the Vue.extend() applied constructor should not call Vue._init() anymore (as the constructor of the Vue class does this), but let the normal constructor chain handle that.

I have looked into 'Vue.extend()' and it seems like some Super class awareness are there, but as far as I can see it end up in only forcing a single call to the 'Vue._init()' function, and nothing more happens.

So are there a trick to make a control constructor behavior in a extended class, or is this on the todo list ?

[yyx990803]

By vue-class-decorator, are you referring to this? https://github.com/vuejs/vue-class-component

If yes, it seems your usage is wrong. It doesn't use property initializers (and does not work with it).

[druppy]

First, I am sorry for any possible misunderstandings on my part, I am really trying to understand the core of this fantastic library, but I am walking on the edge regarding my knowledge of js here :-) But yes, I am referring to your vue-class-component, as this was my main inspiration, for more tight typescript (ES6 classes, really) coupling.

I understand that while using Vue.extend(), it will provide both the reactive data and the resolved el (when constructing a class from the result of the extend :-)), on the this instance. But if I understand what you are saying, this means that any extended Vue class can't hold other data then what is given by the Vue.extend() initializing original given from the options parameter.

If that is the case, my point is that this may be subject to change if we could somehow call the original constructor chain, that then would be able to further initialize the instance property on this down the chain. This would of cause provide a possible overwrite of the values given by the Vue._init() call, but the class instance would behave almost normally.

If this is not possible, then the 'Vue.extend()' instance, is really "just" a prototype extension, and not a real class extension in a classic sense ?

I hope this make sense, it is not easy to explain :-)

[yyx990803]

With vue-class-component the constructor is never called, because we are not actually using the raw class itself, we only treat it as something that holds meta data that can be passed to Vue.extend (which creates the actual sub class).

So I guess you are right in that Vue.extend() is not a classic class extension, and I personally recommend against trying to bend it to fit the classic class extension semantics, because Vue components are not classes after all.

[druppy]

Ok, thanks ... I will try to bend my brain after that fact, thanks for clearing that up :-)