记录一次bug及项目中问题总结

记录一次bug

今天同事碰到一个bug,让我看看。。。

描述：下拉框，下拉选项模糊搜索，搜索后，单选框选中后，复原为原有下拉值

造成原有下拉值被‘假选中’，就是视觉效果上被勾选，但是选中的值是没有此项

效果动图：

bug-des11.gif

简述：
【A1,b1,c1,a2,b2,c2】, 搜索2 出现【a2,b2,c2】，单击a2, 下拉选项变为【A1,b1,c1,a2,b2,c2】，

a2选中，下拉选项中第一项被假选中

排查：因为搜索选中的第几项，就会造成原有下拉值的第几项被假选中，排查方向：index和事件冒泡，经过单步调式，发现不是这方面的问题，然后打印了执行栈顺序，发现下拉值复原是在chekced事件之后，所以定位是事件执行的时机问题，在下拉值复原的地方，设置

this.model = this.dataList
变为
this.$nextTick(() => {
  this.model = this.dataList
})

bug得解

总结
业务中碰到的问题：
除了大意粗心，自己给自己挖坑的情况，比如变量大小写拼写错误,还有是组件拆分不合理，结构有问题
错误有几大类：

• this的指向问题
  大多项目中用到ES6的箭头函数，要注意this的指向问题，它是指向函数定义时外层代码块中的this
  还有一种情况是，笔者有使用过simpleUploader插件，它的api中提供的回调参数，正常的function()写法是拿不到中间的形参值，需要改成箭头函数的写法才可以拿到
• 对象的引用
  由于对象的引用关系，存储的是指向堆内存中的指针，一旦修改，引用的值都会修改，如果不希望修改，使用深度拷贝

this.data = clone(value)

• 异步更新的时机问题
  类似这个bug
• 当修改数据时，未响应式更新

// 这里input中输入值时，页面不会更新
<input v-model='data.name'} />
<script>
  new Vue({
  data (){
    return {
      data: {}
    }
  }
})
</script>

造成的原因是，响应式收集时没有收集到当前的属性值，
解决方案：

1. 设置一个初始值

data: {
  name: ''
}

2. 使用this.$set()，设置成响应式属性
3. 使用 this.$foreUpdate(), 赋值完后，强制刷新组件