我遇到的bug总结:

最新推荐文章于 2024-06-27 16:45:26 发布

庚中

最新推荐文章于 2024-06-27 16:45:26 发布

阅读量646

点赞数

分类专栏：十.我遇到的bug总结文章标签：我遇到的bug总结:

本文链接：https://blog.csdn.net/xiaodi520520/article/details/85059900

版权

十.我遇到的bug总结专栏收录该内容

1 篇文章 1 订阅

订阅专栏

我遇到的bug总结:(有空会一直更新)

开发todoMVC

在这里插入图片描述

todo开发过程中遇到的坑:

当我在做搜索框时,当时有一个场景是要将用户输历史数据中的其中一条文字要进行修改,那我修改这条数据肯定是双击它嘛,双击后不会马上获得焦点,要双击之后再单击一次才能获得焦点,这就带来一个问题,当我双击后如果没有单击,直接在外面单击,因为我外面单击的原因是想直接失去焦点,但我发现没办法失去焦点,页面就一直卡在那里,我查了官方文档才发现vue是失去焦点有,但获得焦点却没有,这样给我的感觉就像你叫我吃饭,但饭都没做一样,最终的解决办法是自己自定义一个获得焦点指令添加到元素上即可(记得这个自定义指令要放在Vue实例化之前).
(官方文档传送门:https://cn.vuejs.org/v2/guide/custom-directive.html)
在这里插入图片描述

面试bug删除数组遇到的bug(一定要倒序,不然会从前补位)

动态添加的引用类型数据

本来没有的属性,如果通过逻辑动态添加,Vue不会跟踪,需要通过Vue.set指定的方法告诉Vue,这个是我动态添加的.
在这里插入图片描述

嵌套组件的第二层组件的template如果没有根目录,直接写其他信息则vue-cli一直会卡在开启服务的界面,也不会报错,解决方法:找到第二层错误的组件模板,在template里增加根目录,把所有内容写在根目录即可.

在这里插入图片描述

mint-ui轮播图的坑

b-jui遇到的bug总结:

在这里插入图片描述
这个b-jui是非常老旧的15年的一个项目,我接到这个项目的时候告知我要增加功能,里面的大部分内容都是用原生js去写的,而且要重新学习15年的bjui,这个ui2016年就停止更新了,网上资料也很少,导致只能自己专研,中间遇到一个问题就是两个不同的tab栏要分别请求数据,我连个tab栏分别写各个请求,里面的代码都是没问题的,但最终做好之后进行合并到主页时就出问题了,两个tab栏里的内容只显示一个,另一个无法显示,起初我认为是我的代码有错,思考和检查了很久也没有发现问题,中间也问了项目经理两三次也没有解决,我只能用不同的方法进行检查和尝试,终于发现b-jui它有一个缺陷,就是所有的东西都封装到一个页面容易导致一个问题(新的内容会把旧的内容给覆盖掉,而且不会显示新的内容),最终我用原生js将每次发请求前都把旧的tab栏先清除,只发一遍新的请求即可,这样可以始终保持只有一个新的请求即可.

移动端兼容性

在这里插入图片描述
当时测试说在小米4手机上浏览网页时布局错乱,我开始以为是我写的样式问题,我觉得不可能呀因为我是用电脑google浏览器检查过不同的手机的,我就换了比较流行的min-ui框架来搭,但是在这手机上还是显示同样的问题,我开始看官方文档和google搜索是不是别人也出现这个问题,但没有找到,估计小米4比较少年轻人用了,于是我决定换一种框架再试,于是挑选了vantUI继续尝试,发现还是有问题,我继续尝试搜索答案,也没有找到,于是我找自己的项目经理咨询,他搜索了一番,也没有找到,他怀疑是不是手机问题,于是我自己借测试人员的手机拿来自己测试,因为当时官网的入口是用公司的彩之云软件授权进行打开首页的,但我不这么做,我换了一种思路,直接把网址和token导出来,自己下载浏览器进行查看,果然发现了问题,正常新的浏览器都没问题正常显示,原来是公司的软件太老久了,很多h5元素都不支持,最后我提醒测试你也赶紧换一下浏览器啦,因为这本身就不是我的问题嘛,最后他也挺不好意思的.

antd输入框不设置value属性的坑

在这里插入图片描述

antd主题设置的坑

在customize-cra导入中,style样式一定要设置true,不是css,不然样式一直不会生效.
在这里插入图片描述

在vue中按需引入vant的坑,官网介绍中没有告知需要注册组件,导致一直没效果.

在这里插入图片描述

移动端vant里的tabs里的坑点

在这里插入图片描述

vant中动态tab栏的问题:

如果你是动态生成的tab栏,你伪元素增加的样式会失效,解决办法是再增加一个全局的style给它,这样就解决了.
在这里插入图片描述

router-view不触发生命周期钩子

在这里插入图片描述
我创建和编辑的页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，官方说你可以通过watch $route的变化来做处理，但其实说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。代码如下:

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

解决element中input输入框number输入数字无效的问题

在这里插入图片描述
饿了么UI中input即使你已经使用v-model.number限制数字,但第一次输入的时候无法马上生效,它只在开始输入是数字的才有效,解决方法是给它绑定一个keyup按键弹起事件,在事件中监听是不是字符串,如果是字符串的话用正则把字符串内容给替换为空即可.注意点是记得要加判断字符串,不判断的话number是没有replace方法的,会报错,加上就好了.
核心代码:

//输入框
          <el-input
            v-model.number="dialogForm.formData.sort_no"
            placeholder="请输入排序"
            clearable
            @keyup.native="number"
          />
//方法
    /**
     * 解决输入框限制数字的问题
     */
    number() {
      if (typeof this.dialogForm.formData.sort_no === 'string') {
        this.dialogForm.formData.sort_no = this.dialogForm.formData.sort_no.replace(
          /[^\.\d]/g,
          ''
        )
        this.dialogForm.formData.sort_no = this.dialogForm.formData.sort_no.replace(
          '.',
          ''
        )
      }
    },