问题说明
近期遇见一非常诡异的问题,vue-property-decorator声明的porp初始值,竟然赋不上了,直接上图:
代码实现如下:
上游组件通过beHidden
控制hide
显隐,并且也有加初始值。
结果跑起来在项目里一看:

beHidden
已经顺利赋值了,但是hide
没有,也就是undefined。非常诡异,遂排查。
排查过程
直接进入断点,找到beHidden
和hidden
的赋值

可以看到这个类刚初始化的时候,
beHidden
是已经被赋值了的,但是经过神秘逻辑
js
c(this, "beHidden", void 0),
之后,等到将beHidden
赋值给hide
的时候,beHidden
就变为undefined了。
那么问题就定位到了,这个神秘的代码又是什么呢?
看看压缩前的代码,发现了这个:
js
_defineProperty(this, "beHidden", void 0);
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
然后就定位到了 @babel/plugin-proposal-class-properties
库babel.dev/docs/babel-...

简直了,感情是 @babel/plugin-proposal-class-properties
把Class里没赋初值的数据都给赋值为void 0了。
解决方案
感觉寄了,这依赖是cli-plugin-babel
引入的,好像也没法处理呀。只能先加watch处理了,反正新项目也直接vue3了。继续深究也意义不大了。
js
@Watch("beHidden", { immediate: true })
onBeHidden(nv: boolean) {
this.hide = nv;
}