前端开发中遇到的那些坑

置顶 Change!!

已于 2024-06-02 18:04:45 修改

阅读量800

点赞数

分类专栏： vue uniapp element 文章标签： javascript 前端 vue.js TagsView

于 2022-08-23 11:56:08 首次发布

本文链接：https://blog.csdn.net/weixin_46172085/article/details/126481810

版权

vue 同时被 3 个专栏收录

44 篇文章 2 订阅

订阅专栏

element

17 篇文章 0 订阅

订阅专栏

uniapp

8 篇文章 0 订阅

订阅专栏

在开发中，往往会遇到很多坑，有的是插件/框架的坑，有的是自己写出来的坑。
自己写的还好，知道哪里有问题，但是在是改别人的代码的时候，往往会被一个坑无语半天。。。

坑1

我们常用的打印像console.log(),alert()，一般都用着没啥问题，可是今天遇到了console.dir();
因为之前是别人的代码，自己也没用过这种打印方法。在这个打印代码后面，光一个for循环，
我试了for、map、forEach等各种方法，就是不执行---后来百度一看，原来这句后面的代码不会被执行。
你自己后面还写了代码，心里一万个XXX...

希望大家和我一样，每个页面的功能/代码都有注释。

坑2
data中定义参数名称时，不要用空字符串初始化，用null，防止各种bug，例如计算价格时，

this.SumPrice +=  i.price

打印出的SumPrice 是拼接在一起，而不是相加。不仅计算，其他各种场景都会遇到类似情况，用过TypeScript,应该知道，参数初始化都是null或者undefined.
不用

sumPrice:"",

用

sumPrice:null,

坑3：vue-element-admin刷新页面,页签 TagsView 丢失问题

https://blog.csdn.net/weixin_45895806/article/details/119572942

坑4：切换tab标签时，页面刷新丢失解决办法
比如：当一个页面输入了搜索条件，然后点击另一个页面，再回到上一页面，搜索条件清空了。这时候用name来缓存这个不活跃的页面，保证回到上一页面搜索条件还在.
router中的name和页面的name一致即可（noCache: false默认是false，设置为true页面将不会被缓存）
在这里插入图片描述

坑5 keepalive如此简单(待实验)
面试的时候经常会提一句keepalive用过吗？
其实可能项目中用过，但是加上这个英文单词就不知道是个啥了（裂开），所以没事要多看看面试题/开源项目。

比如：当一个页面输入了搜索条件，然后点击另一个页面，再回到上一页面，搜索条件清空了。这时候用keep-alive来缓存这个不活跃的页面，保证回到上一页面搜索条件还在

实现keepalive方法有以下几种：
方法1：router.js里面直接设为true，则当前组件进行缓存

{
   path: '/',
   name: 'home',
   meta:{
     keepAlive:true
   },
   component: Home
 }

方法2：
keep-alive代码可以结合v-if进行包裹，如果meta中的keepAlive为true进行缓存，否侧不进行缓存，这样可以更灵活一些

<keep-alive>
   <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

3、用keep-alive上的两个属性进行缓存/不缓存
include 值为字符串或者正则表达式匹配的组件name会被缓存。
exclude 值为字符串或正则表达式匹配的组件name不会被缓存。
首先利用include实现，匹配到组件中定义的name，将进行缓存

<keep-alive include="home">
   <router-view />
</keep-alive>

缺点：就是因为组件被缓存，并没有被销毁，所以组件在切换的时候也就不会被重新创建，自然也就不会调用created等生命周期函数，所以此时要使用activated与deactivated来获取当前组件是否处于活动状态
这时候就可以把created就是一进页面加载的东西放到activated中

activated(){
    console.log("这里是进页面加载")
    console.log("----------activated--------")
  },
deactivated(){
  console.log("离开页面函数")
  console.log("----------deactivated--------")
}

本人也是百度出来的，更详细的见下面博客：

https://blog.csdn.net/weixin_41819098/article/details/89379734

坑5：vue 路由跳转页面数据不更新问题
和上面问题一样：下面这个链接，本人只试了watch一种方法管用，其他方法有的不管用/有空再试。

https://blog.csdn.net/weixin_43045869/article/details/124490118?spm=1001.2014.3001.5502

坑6：for循环
for循环时，不管在新增还是编辑时都必须重新调取接口，不要想着少请求一边接口，
不然下拉框name回显不出来，但是id能
不要想着下面的写法，因为select是根据BrandList回显的

 this.form.brand_id= res.data.store_brand_category_id
 this.form.cate_name= res.data.cate_name//不调接口重新渲染BrandList-不会回显name

<el-select  v-model="form.brand_id"  filterable size="small" placeholder="请选择">
   <el-option v-for="item in BrandList" :key="item.store_brand_category_id" :label="item.cate_name" :value="item.store_brand_category_id"/>
</el-select>