記錄一次bug
今天同事碰到一個(gè)bug,讓我看看。。。
描述：下拉框，下拉選項(xiàng)模糊搜索，搜索后，單選框選中后，復(fù)原為原有下拉值
造成原有下拉值被‘假選中’，就是視覺效果上被勾選，但是選中的值是沒有此項(xiàng)
效果動(dòng)圖：
bug-des11.gif
簡(jiǎn)述：
【A1,b1,c1,a2,b2,c2】, 搜索2 出現(xiàn)【a2,b2,c2】，單擊a2, 下拉選項(xiàng)變?yōu)椤続1,b1,c1,a2,b2,c2】，
a2選中，下拉選項(xiàng)中第一項(xiàng)被假選中
排查：因?yàn)樗阉鬟x中的第幾項(xiàng)，就會(huì)造成原有下拉值的第幾項(xiàng)被假選中，排查方向：index和事件冒泡，經(jīng)過單步調(diào)式，發(fā)現(xiàn)不是這方面的問題，然后打印了執(zhí)行棧順序，發(fā)現(xiàn)下拉值復(fù)原是在chekced事件之后，所以定位是事件執(zhí)行的時(shí)機(jī)問題，在下拉值復(fù)原的地方，設(shè)置
this.model = this.dataList
變?yōu)?this.$nextTick(() => {
this.model = this.dataList
})
bug得解
總結(jié)
業(yè)務(wù)中碰到的問題：
除了大意粗心，自己給自己挖坑的情況，比如變量大小寫拼寫錯(cuò)誤,還有是組件拆分不合理，結(jié)構(gòu)有問題
錯(cuò)誤有幾大類：
-
this的指向問題
大多項(xiàng)目中用到ES6的箭頭函數(shù)，要注意this的指向問題，它是指向函數(shù)定義時(shí)外層代碼塊中的this
還有一種情況是，筆者有使用過simpleUploader插件，它的api中提供的回調(diào)參數(shù)，正常的function()寫法是拿不到中間的形參值，需要改成箭頭函數(shù)的寫法才可以拿到 -
對(duì)象的引用
由于對(duì)象的引用關(guān)系，存儲(chǔ)的是指向堆內(nèi)存中的指針，一旦修改，引用的值都會(huì)修改，如果不希望修改，使用深度拷貝
this.data = clone(value)
-
異步更新的時(shí)機(jī)問題
類似這個(gè)bug - 當(dāng)修改數(shù)據(jù)時(shí)，未響應(yīng)式更新
// 這里input中輸入值時(shí)，頁面不會(huì)更新
<input v-model='data.name'} />
<script>
new Vue({
data (){
return {
data: {}
}
}
})
</script>
造成的原因是，響應(yīng)式收集時(shí)沒有收集到當(dāng)前的屬性值，
解決方案：
- 設(shè)置一個(gè)初始值
data: {
name: ''
}
- 使用this.$set()，設(shè)置成響應(yīng)式屬性
- 使用 this.$foreUpdate(), 賦值完后，強(qiáng)制刷新組件
