@vue/cli4+Ts 官方推荐,这个库完全依赖于vue-class-component(引入它再抛出)官方文档
使用方法:
@Prop
相当于把prop换成了@Prop (以下为写法对比)
实际应用中是否传入类型,因为ts的类型检查,感觉差别不大;
注意定义默认属性不能写成@Prop() prop = ‘default value’
@PropSync
相当于做了两步,第一步跟@Prop一样,第二步还在背后创建了一个计算属性的get和set,这样就可以像普通数据属性一样使用,而且它可以在父组件中附加.sync修饰符(实现父子组件的双向绑定)
@Model
个人感觉不常用
@ModelSync
可以实现父组件在外面v-model 而不是.sync的需求,还有就是这两个值其实都可以随便传,因为父级使用v-model实现的话根本不认属性是什么,当然如果父级不使用v-model而是手动绑定啥的就有用了
@Watch
实现监听,方法名字可以随便取,没有限制;
@Provide / @Inject
provide和inject较少使用,他们是成对出现的,用于父组件向子孙组件传递数据;
@ProvideReactive / @InjectReactive
是@Provide和@Inject的响应式(父组件修改了提供的值,自组件可以捕获到)
@Emit
如果返回的是一个promise,则在resolve之前运行它;
如果事件没有通过事件参数提供事件的名称,则使用函数名称(这种情况下,函数名会由camelCase转为kebab-case)
@Ref
接收一个可选参数,用来指向元素或子组件的引用信息。如果没有提供这个参数,会使用装饰器后面的属性名充当参数;
@VModel
@Component
该属性完全继承于vue-class-component,接收一个对象作为参数,可以在对象中声明components,filters等未提供修饰器的选项,也可以声明computed,watch等;
Mixins
其他补充:
1、对于computed计算属性,只需要将计算属性的属性名定义为一个函数,然后在前加上get关键字就可以;
2、被Component类装饰器包装过后的类其实已经不是原来的类了,这个类在被vue实例化组件的时候,调用的构造器已经不是我们写在代码里的那个;装饰器会返回一个新的构造器,是Vue Component;而我们通过箭头函数能访问到的那个原来类的实例,是装饰器在复制被装饰类的实例方法时创建出来的实例;所以在类里使用箭头函数,使这个方法能够访问调用被装饰的类,是否会造成内存泄漏???