vue-property-decorator Prop失效问题排查记录

用户名未被占用2024-04-22 15:33

问题说明

近期遇见一非常诡异的问题，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;
    }