watch案例解析（element-ui el-select 無法選中問題剖析）

fire

讀在最前面：

　　1、此文章銜接Vue 虛擬Dom 及 部分生命周期初探，相關整體知識點請先閱讀后再繼續本文閱讀

問：子組件中明明有watch value，為什么this.$emit('input', 888);沒有觸發watch回調，反而在父組件data數據變化后觸發回調?

 <child v-model="b"></child>
    var child = Vue.extend({
      template: '<p>數據響應及render相關-案例說明</p>',
      props: {
        value: {
          required: true
        }
      },
      mounted() {
        this.$emit('input', 888);
      },
      watch: {
        value(val, oldVal) {
          console.log(val, oldVal, 'child')
        }
      }
    });

點擊查看涉案代碼

如下圖：

 

關鍵執行順序分析：

1、子組件this.$emit('input', 888)執行

2、父組件執行這段代碼，settime 去更新父組件值

  created() {
        this.b = 1
        setTimeout(() => {
          this.a = 3
        }, 1000)
      }

3、settime執行后，觸發父組件a的set -> 觸發watch -> 觸發vm.render ->  觸發patch-> 觸發 validPros -> 觸發子組件pros更新 -> 觸發value更新 ->回調watch

大致流程如下圖

 

el-select 中也是實現了watch value（詳見源碼），所以在父級中引用組件時v-model值沒有在data中申明的情況下，可能出現切換選擇項沒有反應，當其他data值變化時，導致render渲染，select就會自動選中的異常

 

備注：　　

　  1、observe不會對不在data中的數據進行處理

      2、頁面更新時，會執行render，所有的數據綁定會在內存中再次執行，包括{{xxx}} , {{methods}}, {{computed}} 等，生成新的vnode

      3、一個時間周期中的數據更新，非立即執行的watcher，都會統一進入queueWatcher，在下個tick進行執行

 

 by：海豚灣-豐