why not use class style so vue template can take advantage of static language analyzer like angular's Angular Language Server for AngularTemplate

[John0King]

What problem does this feature solve?

Maybe current sfc worked for variable detect, but for a very long time , There is not a Vue Language Server for Vue's template to do things for custom component tag intelliSense / property intelliSense. That's also why I like angular more than Vue, any third party component must read their document so that you can know what property can be use. and I think by using vue 2 's vue-property-decorator , that vue actually can take advantage of the static language analyzer to build a official Vue language Server , but that must use class style code instead of "configuration" base ( js base code can provide a "*.d.ts" ).

What does the proposed API look like?

import  Markdown from "./components/markdown.vue";
// MarkdownCompoent : VueInstance<MarkdowComponent> // MarkdowComponent is the class  we defined
// type VueInstance<T>  = Vue & T;

@Compoent({  compoents:{ Markdown } })
export class MarkdownPreviewer extends Vue
{
     @Prop()
      markdownText!:string;

    @Emit("markdownrenderd")
     onMarkdownRenderd(){    }
}

now if there is a vue lanauge server, now we can find the component metadata and register it for tag complete and the attribute can find by the @Prop member , @Emit for event

[yyx990803]

1. Class has more issues than it solves https://composition-api.vuejs.org/#type-issues-with-class-api

2. Vue doesn't need to use Class API to get type hints. Vetur has had intellisense support for templates for a very long time by analyzing the object syntax, just not performing actual type checking. @znck has made type checking work in templates as well (still WIP), and it doesn't need classes.

3. You can still use vue-class-component with Vue 3.

[John0King]

@yyx990803 try a new Vue project, I find that the Vetur only support object style of vue for tag complete, and property complate and has no support for event , I think may be Vetur use some pattern match tech, and there on such pattern for $emit.

and by using analyze ts class metadata , then I believe the Template Linguage Server will be much reliable, because event in class style is

@Emit('reset')
  resetCount() {
    this.count = 0
  }

[leopiccionia]

The lack of v-on and $emit type-checking is not related to class v object. Vue 2.x just doesn't have a way to type-check emits, so far.

But Vue 3.x introduced the new emits option to solve this problem, and new class components will probably have support to it, too.