在 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 ...

sigmarising

7229人浏览 · 2019-06-04 09:11:32

sigmarising · 2019-06-04 09:11:32 发布

在 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

更详细的使用参见：

3. 注意 undefined 初始化的 data

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

详细可参考：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^