Vue常见的BUG

1.页面闪屏问题。当网速比较慢的时候,如果使用的{{}}插入的内容时,会在卡顿的页面出现{{}}及其源码。

解决方法:

  • 可以使用v-text 指令插入内容但是这样会覆盖原有标签的内容;

  • 也可以在固定标签上添加自定子样式 v-cloak,这样可以解决闪屏问题也可以在标签内插入自己需要的内容不会被覆盖例:

     [v-cloak] {
                display: none;
            }
    <p v-cloak>{{ mes }}+++++</p>

2.如果在组件上定义的事件绑定不上可以使用.native解决

3.watch在深度监听时卡顿,需要将复杂数据类型转化为简单类型,进行浅监听。

4.如果出现数组变了,页面没有重新渲染的问题,可以采用以下方法解决:

//1.this.goods.splice("下标",1,“新值”)
this.goods.splice(index,1,obj)
​
//2.vm.$set(数组,下标,新值)
this.$set(this.goods,index,obj)
​
//3. Vue.set(数组,下标,新值)
Vue.set(this.goods,index,obj)

如果时json发生了变化,页面不渲染

//vm.$set(obj,key,value)
this.$set(this.json,"y",30) 
Vue.set(this.json,"y",40)