在 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 钩子。

详细可参考：

Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue