這是兩個不會報錯,但會引發千奇百怪異常現象的問題
一、嵌套判斷
父組件 v-if=‘屬性A’
子組件 v-if=‘屬性B’
這是邏輯死循環,因爲判斷 屬性B 時,屬性A 有可能已經發生了變化
可以使用計算屬性computed
C(){
return A && B
}
二、賦值迴路
this.form.A = 運算(this.form.B)
this.form.B = 運算(this.form.A)
這是邏輯死循環,雖然不清楚Vue內部如何實現的,但是就現象來分析,應該是在綁定值之間會建立邏輯關係
這裏可以使用局部變量運算然後將結果賦值給綁定變量
~~~~~~~~~~~~~~~~~分界線~~~~~~~~~~~~~~~~~
值得注意的是:
Promise存在超時無法拿到結果的情況,所以經常會有表單校驗不提示校驗失敗結果,卻也通不過的情況
校驗嵌套
A字段: [
/**
*應替換爲 {validator: 具體的B校驗方法}
* const validateA = (rule, value, callback) => {
* _this.$refs.form.validateField('B');
* return callback();
* }
* {validator: validateA}
* 兩相對比,可以發現,死循環產生的原因是因爲:
* 箭頭表達式的最終返回依賴於B的校驗結果
* 而換成validateA之後則消除了這種關係
**/
{validator: ()=> _this.$refs.form.validateField('B字段')}
]
這個校驗會在提交表單校驗時
this.$refs.form.validate((valid) => {
// 校驗超時,這裏取不到校驗結果
});
反覆校驗B字段多次(調試結果,原理不明,盲猜是因爲每校驗一個字段,表單都會整體賦值一次,然後校驗次數與表單字段總數成正比)
因此造成校驗超時,所以無法拿到校驗結果,所以校驗不通過。
證明
我在調試時,大斷點,整個調試過程超過三分鐘(這個時間應該是與字段總量有關的)會成功,如果不打斷點或者斷點放的過快,都不會成功。