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

问题说明

近期遇见一非常诡异的问题,vue-property-decorator声明的porp初始值,竟然赋不上了,直接上图:

代码实现如下:

上游组件通过beHidden控制hide显隐,并且也有加初始值。

结果跑起来在项目里一看:

beHidden已经顺利赋值了,但是hide没有,也就是undefined。非常诡异,遂排查。

排查过程

直接进入断点,找到beHiddenhidden的赋值

可以看到这个类刚初始化的时候,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-propertiesbabel.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;
    }
相关推荐
一一一8715 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
Dolphin_海豚17 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件20 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易1 小时前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma771 小时前
JavaScript 获取短链接原始地址的解决方案
前端