最近做Vue前端项⽬时遇到的⼀些问题总结以及解决⽅案
最近忙碌，但是也要总结⼀下最近遇到的⼀些问题，查漏补缺
⽂章⽬录nginx部署前端项目
遇到的问题：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" ></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
优点：准确⽆误
缺点：傻不拉⼏
最后使⽤的⽅法
在axios的请求中配置apiNums，请求过来++，响应中请求完成–；为0 则关闭loading

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。