【踩坑记】2024年上半年开发踩坑实录！

现象：Vue项目中个别页面渲染非常缓慢，而其他页面渲染正常

原因：该页面在watch中调用了递归函数。问题代码如下

js 复制代码

watch: {
  customTreeList: {
     handler(newVal){
       const treeData = newVal;
       this.circleUserTree(treeData);
       this.deptTreeList = treeData;
     },
     deep: true,
   }
}

解决：在watch里禁用了递归函数后，页面渲染正常了。

另外，笔者使用以下写法也会造成页面性能问题甚至死循环，即：

html中v-if="getSpeShow()" + watch中调用getSpeShow()。

最终笔者在v-if中使用变量而非直接使用getSpeShow()才解决问题。

现象：开发的系统链接在企业微信聊天框中不能显示缩略图

解决：在网站网页 html代码中的之后增加需要的缩略图图片。

js 复制代码

 <body>
    <div style="visibility:hidden;height:0;width:0;">
      <img src="/image/logo-300.jpeg" style="width: 300px; height: 300px;"/>         </div>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
 </body>

注意事项：

1、这个图片尺寸不能太小，在300*300以上就可以了。

2、图片放到body之后，微信应该会默认取页面中第一张图片 。

3、用JPG图片,如果格式是png的，微信朋友圈可能会直接把他忽略了。

4、width和height都设为0，style不能设置为display:none，可设置为visibility:hidden。

5、图片地址应为绝对路径。

现象：Vue中使用window.onresize无效

原因：父子组件里均使用了window.onresize，导致后面将之前的所覆盖。

解决：使用window.addEventListener() 即可，代码如下：

js 复制代码

mounted:{
   // 绑定resize
  window.addEventListener('resize', ()=>{
  })
},
destoryed:{
   // 解绑resize
   window.removeEventListener('resize', ()=>{     
   })
}

现象：el-select组件下拉框跟随页面滚动

原因：el-select组件的popper-append-to-body属性值默认为true。

解决：将popper-append-to-body属性设置为false可以让下拉框不跟随页面滚动。但是如果el-select组件在el-dialog中使用，则单独使用popper-append-to-body属性设置无效，需结合css样式使用：

js 复制代码

<el-select class="common-select" :popper-append-to-body="false"></el-select>

.common-select {
  .el-select-dropdown {
    position: absolute !important;
    top: 32px !important;//选择框的高度
  }
}

复制代码