原始碼分析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 ...