Description
What problem does this feature solve?
vue3 is writing using typescript , but it seems your team do not want we to use typescript to write vue app, today it's harder to use typescript with a non-class style object data define to define a component. and I don't know why your team is reject typescript as your first class language support. and maybe because the metadata standard not finish yet, but I want to say is that without metadata support in ES we can even use it now , that means that no matter what happened , metadata work for now will work tomorrow too !
and my idea is to use a factory to get component, if you do not want the metadata then make the factory can be replaced. eg. default vue3.js only use object component factory, and with class support library , that replace with a two type factory (class factory + object factory).
why use a factory ?
because we can stop map class to object and then we can get a clear class component without mix the object component behaviors.
in object component (I called it data configure style instance) , you try to hide the lifetime method, and in class there are no need ( the factory active the method and any lifetime stuff is doing in factory instead of class lifetime ).
ts
export class MyComponent implement { // stop using export default please
@Prop("inValue")
inValue:string = "abc" // no don't need map to object data , so we get class default value too. and the `type` we can use typeof() in class factory
}and for js users
export class MyComponent {
}
__decorator([
Prop("inValue", ) // this is just a propototype , and we should see how typescript add metadata
],MyComponent.prototype, "invalue", null)the good thing with type component
with ref component
export class MyComponent{
@Ref('xComponent')
xComp!: XComponent
dothing():void{
this.xComp.<methodName> // we don't have too search document again.
}
}other change
mixin and vuex repalce with service (maybe we need rxjs to resolve the changing event).
@Servers(Lifetime.Singleton)
export class CartService{
cartNumber:number = 0;
addCartItem(item:CartItem){
.....
cartNumber += 1;
}
}using
export class MyComponent{
@InjectService(CartService) // this should mark the class factory to observe event from CartService too
private cartService!:CartService
}What does the proposed API look like?
import { ClassFactory } from "vue-class"
Vue.Factory = ClassFactory // default is `ObjectFactroy` from "vue"