Summary

• @Component will be renamed to@Options.
• @Options is optional if you don't declare any options with it.
• Vue constructor is provided fromvue-class-component package.
• Component.registerHooks will move toVue.registerHooks

Example:

<template>  <div>{{ count }}</div>  <button@click="increment">+1</button></template><script>import {Vue,Options }from'vue-class-component'// Component definition@Options({// Define component options  watch: {count:value=> {console.log(value)    }  }})exportdefaultclassCounterextendsVue {// The behavior in class is the same as the current  count=0increment() {this.count++  }}</script>

// Adding lifecycle hooksimport{Vue}from'vue-class-component'Vue.registerHooks(['beforeRouteEnter','beforeRouteLeave','beforeRouteUpdate'])

Details

As Vue v3 no longer provides baseVue constructor, Vue Class Component will provide it instead. Fortunately, we can add class component specific features in the base class as we define it in Vue Class Component package.

One of the benefits with the newVue constructor is we can make@Component decorator optional. There were non-trivial number of confusions regarding missing@Component decorator in super class / mixins (e.g.#180). Making decorator optional would solve this problem.

Also renaming@Component with@Options would make more sense as it is for adding component options to your class components rather than making a class component.

Since@Options is optional, havingregisterHooks on the decorator will not work. So we will move the method under static field ofVue constructor.

Alternative approach

Declaring component options as static properties

We could do this to define class component options:

exportdefaultclassCounterextendsVue{// All component options are static propertiesstaticwatch={count:value=>{console.log(value)}}count=0increment(){this.count++}}

But it has a drawback: we cannot define static properties / methods not for component options both on userland and library side. e.g. we cannot define static method likeregisterHooks onVue.