vue中的傳值及賦值問題
vue的傳值及賦值
作為Vue非資深的學習者，在工作中使用vue的時候還是遇見的很多所謂的坑，打算總結(jié)一下；就在昨天PM找到我，給我看了一個bug，很是頭疼的是，我看了半天代碼就是看不出有什么問題，但是實現(xiàn)起來就是報錯。
先看一下場景
這是詳情頁的tab欄，這里的大概邏輯就是從別的頁面跳轉(zhuǎn)到詳情頁并且需要選中虛擬服務器組這個tab欄，代碼的邏輯是先獲取詳情頁信息Detail，然后把detail這個對象以props的形式傳遞給虛擬服務器組這個子組件
export default {
props：['detail'],
data(){
return {
type: this.detail.type
}
},
methods: {
XXX(){
}
}
}我在這里多做了一步，就是講props里面的屬性賦值給了data里面的變量，但是如果我跳轉(zhuǎn)到詳情頁后立即轉(zhuǎn)到虛擬服務這個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 相同的結(jié)果，雖然 null 和 undefined 不一樣。注意：要同時判斷 undefined 和 null 時可使用本法。
var exp = undefined;
if (typeof(exp) == undefined)
{
alert(“undefined”);
}以下是正確的用法：
var exp = undefined;
if (typeof(exp) == “undefined”)
{
alert(“undefined”);
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue this.reload 方法 配置，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
通常我們的項目會越做越大,頁面也會越來越多,隨之而來的是接口數(shù)量的增加,api統(tǒng)一管理,不管接口有多少,所有的接口都可以非常清晰,容易維護,下面這篇文章主要給大家介紹了關(guān)于axios二次封裝的詳細過程與跨域問題的相關(guān)資料,需要的朋友可以參考下2022-09-09
在現(xiàn)代?Web?應用中,Tab?頁簽功能是非常常見的一種交互模式,它可以幫助用戶在不同的視圖間快速切換,而不會丟失當前視圖的狀態(tài),本文將介紹如何在?Vue?項目中實現(xiàn)一個帶有緩存功能的?Tab?頁簽功能,需要的朋友可以參考下2024-08-08
這篇文章主要給大家介紹了關(guān)于利用vue+turn.js實現(xiàn)翻書效果的相關(guān)資料,turn.js是使用了jquery書寫的,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了如何利用Vue實現(xiàn)上拉加載下一頁效果，文中的示例代碼講解詳細，對我們學習Vue有一定幫助，需要的可以參考一下2022-08-08
由于狀態(tài)零散地分布在許多組件和組件之間的交互中,大型應用復雜度也經(jīng)常逐漸增長,為了解決這個問題,Vue 提供 vuex,這篇文章主要給大家介紹了關(guān)于vuex項目中登錄狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
關(guān)于vue的語法規(guī)則檢測報錯問題的解決
在配置路有的時候，陸續(xù)出現(xiàn)了各種報錯其中最多的是一些寫法，例如空格，縮進，各種括號，這篇文章主要介紹了關(guān)于vue的語法規(guī)則檢測報錯問題的解決，非常具有實用價值，需要的朋友可以參考下2018-05-05
詳解vue2.0 資源文件assets和static的區(qū)別
這篇文章主要介紹了詳解vue2.0 資源文件assets和static的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
這篇文章主要介紹了vue如何動態(tài)修改$router參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09