在写Vue项目时,经常会在Ts代码里用@Prop去定义一个外部属性,比如 @Prop(Number)value:number=0
那么这句代码出现的两个number,各自是啥作用?
首先我们得搞清楚在写完Ts代码之后,我们在运行项目时会经历两个过程:
1:将Ts代码转译成Js代码 ,这个过程会对代码进行检测看是否有报错
2:将转换好的Js代码渲染到浏览器上。
而 @Prop(Number)value:number=0 此代码中后面的number是在阶段1即编译阶段:完成对变量value类型的检测,看看你在Ts代码里调用此变量时,是否出现了不符合此类型的方法调用,如果不对,就在阶段1的编译阶段就报错,等你bug改完之后再进行后面的阶段。比如对numer数据去调用length属性这种错误。
而前面的Number 就是在阶段2渲染的时候,去检查template 标签里,你给这个属性赋的值类型是否是对的。如果不对,则在第二个阶段报错。