Vue深坑Mark

這是兩個不會報錯,但會引發千奇百怪異常現象的問題

一、嵌套判斷

父組件 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字段多次(調試結果,原理不明,盲猜是因爲每校驗一個字段,表單都會整體賦值一次,然後校驗次數與表單字段總數成正比)
因此造成校驗超時,所以無法拿到校驗結果,所以校驗不通過。

證明

我在調試時,大斷點,整個調試過程超過三分鐘(這個時間應該是與字段總量有關的)會成功,如果不打斷點或者斷點放的過快,都不會成功。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章