最近忙碌,但是也要总结一下最近遇到的一些问题,查漏补缺
文章目录
遇到的问题:watch的深度监听deep:true 导致了 Maximum call stack size exceeded
记录
- 项目里有一个奇大无比及其复杂的的数据结构,一位同学对其进行了深度监听,但是在执行的handler方法里又对这个data做了一些操作,导致了栈溢出。
- deep:true,深度监听,由于watch只能监听到一到两层结构,于是就有了deep的深度监听,遍历每一层为其加上监听器,这样是非常消耗性能的一个操作。
- 后来改为监听具体属性,用"" 括起来对应需要监听的字段
"data.key":{
handler(data) {
xxxFuction
},
immediate:false,
deep:false,
}
- watch有三个常用的属性
- immediate :如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行
- handler:值变化后的回调函数
- deep:深度监听
遇到的问题:页面动态扩展,从没有滚动条到出现滚动,导致页面抖动
记录:
- 页面主体部分是一个组件,数据为加载前,页面没有滚动条,v-for 数据加载完成后,撑满一屏多,出现了滚动条,于是页面开始抖动一下,因为可是宽度变了
- 解决方案:让body
position: absolute;
脱离既定文档流,出现的滚动是在body体内而不是body外部,从而让body不闪动
html {
overflow-y: scroll;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}
遇到的问题:vertical-align 设置什么情况下才会起作用
记录:
- 最近居中犯糊涂了,于是写了一篇专门的居中屡屡思路:上下左右垂直居中的几种方式;
- vertical-align什么情况下会起作用呢
- 父级设置了
line-height
,子div为 inline-block/inline元素。 - inline元素作为父元素可以不设置line-height,字体会撑起一个适合子元素作用的高度。
- 父级设置了
<span class="box">
<span class="dot" style="
display: inline-block;
width:4px;
height:4px;
background: #000;
vertical-align: middle;
"></span>
边上的点可以使用vertical-align设置位置
</span>
遇到的问题:vue Webpack打包后的dist 文件夹中新增除static其他名称的静态文件夹
记录:
- 现在项目打包出来的dist文件夹中包含一个index.html 和一个static文件夹
- 现在项目需求需要部署到云效平台,前端放置对应的Nginx配置信息一起打包,必须在dist根目录下,于是需要在根目录打包下生成新的nginx的Configs文件夹
步骤:
- 找到build下的这两个文件
- 使用Webpack的
CopyWebpackPlugin
进行指定位置代码的拷贝和打包
- 配置from 的来源地址和打包后的to 地址
遇到的问题:全局性的接口请求加遮罩,接口请求完成遮罩去除
记录:
-
页面有5个异步的接口,有接口请求时打开遮罩,全部请求完成后关闭遮罩
-
可选方法:
- 使用promiseAll
- 优点:确保数据全部请求完
- 缺点:需要很多冗余的代码
- 设置接口请求watch,每个接口请求拿到数据count++,watch这个count是否和当前页面接口请求的总数相同,相同则关闭loading
- 优点:准确无误
- 缺点:傻不拉几
- 使用promiseAll
-
最后使用的方法
- 在axios的请求拦截器中配置apiNums,请求过来++,响应拦截器中请求完成–;为0 则关闭loading
- 在axios的请求拦截器中配置apiNums,请求过来++,响应拦截器中请求完成–;为0 则关闭loading