踏入前端，步入玄學

　17年底至18年初附帶做了vue的一些框架搭建，中途斷斷續續用了部分vue，時隔幾個月後的工作又拾起vue，對於一些原理性的知識淡忘了，正值這段時間使用中遇到了一些坑，又撥了部分代碼出來溫習溫習。

正式進入大前端，新同事稱謂的玄學...

讀在最前面：

　　1、本文根據問題，講述大致 Vue虛擬Dom Diff 思路、數據響應式機制相關，源碼版本 Vue.js v2.5.17-beta.0

2、知識點：vue virtual dom diff、 observe 、 watch、render ，各知識點暫不深入剖析

　　3、閱讀本文，讀者應了解Vue有一定的前端基礎，知道一些名詞概念如：render、vnode、virtual dom

　　4、本文先引出問題及原理，然後單用2個實現給出詳情解析

　　4、v-if案例解析（element-ui form-item表單無法驗證問題剖析 ）（問1）

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

直接甩疑問案例，Fire！

問1：當v-if為true時，會重新渲染相關dom節點嗎?

問題來源（element-ui form-item表單無法驗證問題剖析）

<child v-if="true"><child>

答：會！（什麽？？？ 難道v-if 為true不應該一直堅強到最後嗎，是什麽讓她如此虛弱）

涉及 知識點 vue virtual dom diff

問題原理：

前言：vue2 引入了虛擬dom，即如果使用.vue的模板方式書寫，會首先編譯為render函數，生成vnode，每次數據變更後，會在nexttick中進行新老vnode對比進行patch操作

1、對比前後 vnode對象相同顏色的節點進行同層級對比 ，如下圖

2、我們挑選黃色節點說明：0、1、2標識節點序號 ， 頭、尾 分別代表節點的頭部和節點的尾部

對比序號從0、0（分別對應老節點序號0，新節點序號0）開始 ,每一次循環對比一個節點數據（使用sameVNode方法判斷，見下面代碼示例，源碼5858行），新老對比範圍為 ，老（0-2）

（1）頭頭，即老0->新0 如果一致，則新老開始節點 序號 +1 同時，跳出循環 ，開始下一個循環對比 新老對比範圍為 ，老（1-2）新（1-2）

（2）尾尾，即老2->新2 如果一致，則新老結束節點 序號 -1 同時，跳出循環 ，開始下一個循環對比 新老對比範圍為 ，老（0-1）新（0-1）

（3）頭尾，即老0->新2 如果一致，則老開始節點 序號 +1，新結束節點序號-1 同時，跳出循環 ，開始下一個循環對比 新老對比範圍為 ，老（1-2）新（0-1）

（4）尾頭，即老2->新0 如果一致，則老結束節點 序號 -1 ，新開始節點序號+1 同時，跳出循環 ，開始下一個循環對比 新老對比範圍為 ，老（0-1）新（1-2）

（5）用新節點去未遍歷過的的老節點中查找

（6）老節點全部遍歷完或新節點全部遍歷完，則退出大循環（對未遍歷到的老節點執行刪除操作，對未遍歷到的新節點執行新增操作）

function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}　　

大致如圖：

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

問題來源（element-ui el-select 無法選中問題剖析）

    <child v-model="b"></child> // b在父組件中沒有初始化，即沒有執行父組件的observe
    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‘)
        }
      }
    });

涉及 知識點 observe、render、watch

問題原理：

1、vue實例在生成時，會經歷比較漫長的初始化過程如：初始化事件、渲染器、註入器、數據代理\劫持等等

2、v-model指令為被默認構造為 <input :value="b" @input="b = $event.target.value" />（此處b為上面代碼中v-model="b"），執行this.$emit(‘input‘, 888),會更新b的值

3、每次data數據變化的時候，會收集watcher進入一個隊列，隊列中收集了所有此時刻周期中有相關變化形成queueWatcher，在下一個時間周期中進行數據響應更新 flushSchedulerQueue，並執行render 、patch

4、在render中會進行新老vnode patch，在更新過程中會執行node的prepatch（源碼5938行）操作，其中會執行updateChildComponent -> validateProp 從而更新了 value的值，從而進入了watch回調

大致如圖：

by：海豚灣-豐

Vue 虛擬Dom 及 部分生命周期初探