在 Vue 中使用 vue-class-component 与 vue-property-decorator

在 Vue 中使用 vue-class-component 与 vue-property-decorator

---

在 Vue 的 V2.X 版本中使用 TypeScript 时，推荐使用基于类的注解装饰器进行开发。

---

1. 安装相关

vue-property-decorator 基于 vue-class-component 开发而成，所以安装时仅需安装 vue-property-decorator 即可。

npm i vue-property-decorator

---

2. 使用相关

vue-class-component 提供（本文截至 V7.1.0）：

• methods 可以直接声明为类的成员方法
• 计算属性可以被声明为类的属性访问器
• 初始化的 data 可以被声明为类属性
• data、render 以及所有的 Vue 生命周期钩子可以直接作为类的成员方法
• 所有其他属性，需要放在装饰器中

vue-property-decorator 提供（本文截至 V8.1.1）：

• @Prop
• @Model
• @Watch
• @Inject、@Provide
• @Emit

更详细的使用参见：

• README - vue-class-component
• README - vue-property-decorator

---

3. 注意 undefined 初始化的 data

vue-class-component 并不会使初始化为 undefined 的 data 变的响应式，应当使用 null 初始化或者 data 钩子。

详细可参考：

• README - vue-class-component: undefined will not be reactive
• A bug when a field has undefined value