vue前端最近开发中遇到的坑

一、组件的name

问题描述：父组件name和子组件name相同时，子组件打开第一次后，第二次不再重新渲染。

解决办法：这是因为name相同时，<keep-alive>会进行缓存。

二、问题排查方法

问题描述：本地运行一切正常，打包放到生产环境后页面渲染不出来，一片空白，并且前端无任何错误日志，生产环境也无法轻易看到后台日志。

解决办法：浏览器开启调试模式，如chrome f12进入sources模块，打开pause on exception，再点击报错页面进行排查。

三、图片地址自动拼接当前服务器地址

问题描述：使用vue图片上传组件上传后保存相对地址，反显时图片自动拼接了本地域名，导致图片无法显示

解决办法：图片上传成功后返回的地址是外部地址，需要完整的URL，不然会被视为本地的绝对路径，需要在链接前面加上 http://

return !(/^(http https)/.test(url)) ? this.$picurl + url : url

四、string类型的多个参数大小比较

问题描述：js第一个参数输入4800，判断大小时比第二个参数2100小。

解决办法：字符串的比较是基于字符的 ASCII 码值进行的，所以可能会出现 2000 大于 4800 这种不符合数值大小逻辑的情况，使用 parseInt() 函数将字符串转换为整数，然后进行比较。这样就能得到符合数值大小逻辑的结果。