vue中的傳值及賦值問題
vue的傳值及賦值
作為Vue非資深的學習者,在工作中使用vue的時候還是遇見的很多所謂的坑,打算總結一下;就在昨天PM找到我,給我看了一個bug,很是頭疼的是,我看了半天代碼就是看不出有什么問題,但是實現(xiàn)起來就是報錯。
先看一下場景
這是詳情頁的tab欄,這里的大概邏輯就是從別的頁面跳轉到詳情頁并且需要選中虛擬服務器組這個tab欄,代碼的邏輯是先獲取詳情頁信息Detail,然后把detail這個對象以props的形式傳遞給虛擬服務器組這個子組件
export default { props:['detail'], data(){ return { type: this.detail.type } }, methods: { XXX(){ } } }
我在這里多做了一步,就是講props里面的屬性賦值給了data里面的變量,但是如果我跳轉到詳情頁后立即轉到虛擬服務這個tab欄的時候,(此時會立即觸發(fā)XXX方法,并且會使用type這個變量),此時回報錯,就是type是未定義的?
解決方法
直接將props中的detail變量直接拿來使用,不需要賦值給data中的變量,就不會出現(xiàn)這種情況。
深層的原因不清楚,但是初步斷定是時間差的問題,在測試的時候發(fā)現(xiàn),這種bug不是必然復現(xiàn)的,時好時壞,直接使用的話避免了這個問題。
vue的賦值小技巧
嚴謹代碼
嚴謹性即健壯性,是指軟件對于規(guī)范要求以外的輸入情況的處理能力。所謂的系統(tǒng)是指對于規(guī)范要求以外的輸入能夠判斷出這個輸入不符合規(guī)范要求,并能有合理的處理方式。
另外健壯性有時也和容錯性,可移植性,正確性有交叉的地方。
比如,一個軟件可以從錯誤的輸入推斷出正確合理的輸入,這屬于容錯性量度標準,但是也可以認為這個軟件是健壯的。
undefined判斷
JS 和 Vue中有兩個特殊數(shù)據(jù)類型:undefined 和 null,下節(jié)介紹了 null 的判斷,下面談談 undefined 的判斷。
以下是不正確的用法:
var exp = undefined; if (exp == undefined) { alert(“undefined”); }
exp 為 null 時,也會得到與 undefined 相同的結果,雖然 null 和 undefined 不一樣。注意:要同時判斷 undefined 和 null 時可使用本法。
var exp = undefined; if (typeof(exp) == undefined) { alert(“undefined”); }
以下是正確的用法:
var exp = undefined; if (typeof(exp) == “undefined”) { alert(“undefined”); }
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue+node+socket io實現(xiàn)多人互動并發(fā)布上線全流程
這篇文章主要介紹了vue+node+socket io實現(xiàn)多人互動并發(fā)布上線全流程,本文給大家提到了socket.io相關用法概覽及開發(fā)流程,需要的朋友可以參考下2021-09-09