原始碼分析1：
diff的必要性，src\core\instance\lifecycle.jslifecycle.js - mountcomponent()
元件中可能存在很多個
data
中的key使用
原始碼分析2：
diff的執行方式，src\core\vdom\patch.js - patchvnode()
patchvnode
是diff
發生的地方，整體策略：深度優先，同層比較
原始碼分析3：
diff的高效性，src\core\vdom\patch.js - updatechildren()
原始碼分析1：
diff的必要性，src\core\instance\lifecycle.jslifecycle.js - mountcomponent()
元件中可能存在很多個
data
中的key使用
export function mountcomponent (
vm: component,
el: ?element,
hydrating?: boolean
): component else `
const endtag = `vue-perf-end:$`
mark(starttag)
const vnode = vm._render()
mark(endtag)
measure(`vue $ render`, starttag, endtag)
mark(starttag)
vm._update(vnode, hydrating)
mark(endtag)
measure(`vue $ patch`, starttag, endtag)
} else , true /* isrenderwatcher */)
hydrating = false
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) else else if (isundef(oldendvnode)) else if (samevnode(oldendvnode, newendvnode)) else if (samevnode(oldendvnode, newstartvnode)) else else else if (newstartidx > newendidx) }
結論：
1.diff
演算法是虛擬
dom技術的必然產物：通過新舊虛擬
dom作對比（即
diff
），將變化的地方更新在真
實dom
上；另外，也需要
diff
高效的執行對比過程，從而降低時間複雜度為
o(n)。
2.vue 2.x
中為了降低
watcher
粒度，每個元件只有乙個
watcher
與之對應，只有引入
diff
才能精確找到
發生變化的地方。
3.vue
中diff
執行的時刻是元件例項執行其更新函式時，它會比對上一次渲染結果
oldvnode
和新的渲染
結果newvnode
，此過程稱為
patch。
4.diff
過程整體遵循深度優先、同層比較的策略；兩個節點之間比較會根據它們是否擁有子節點或者文
本節點做不同操作；比較兩組子節點是演算法的重點，首先假設頭尾節點可能相同做
4次比對嘗試，如果
沒有找到相同節點才按照通用方式遍歷查詢，查詢結束再按情況處理剩下的節點；借助key
通常可以非
常精確找到相同節點，因此整個
patch
過程非常高效。
vue訓練營8 vue效能優化
答題思路 根據題目描述，這裡主要 vue 層面的優化 一 路由懶載入 const router new vuerouter 二 k eep alive 快取頁面 id 三 使用 v show 復用dom class cell v show value class on n 10000 v show ...
vue訓練營10 vuex使用及理解
回答策略 1.首先給vuex下乙個定義 2.vuex解決了哪些問題，解讀理念 3.什麼時候我們需要vuex 4.你的具體用法 5.簡述原理，提公升層級 總結 1.vuex是狀態管理庫。它以全域性方式集中管理應用的狀態，並且可以保證狀態變更的可 性。2.vuex主要解決的就是多元件之間狀態共享的問題。...
4 vue開發環境下跨域問題
跨域產生的原因 瀏覽器的同源策略不允許跨域訪問，所謂同源策略是指協議 網域名稱 埠相同。vue cli提供的解決vue開發環境下跨域問題的方法，它是http 中介軟體，依賴於node.js。基本原理是用服務端 解決瀏覽器跨域 cms跨域解決原理 1 訪問頁面http localhost 12001 ...