Vue3 DOM Diff 鏍稿績绠楁硶瑙ｆ瀽
Posted 绔ユ宸?,
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3 DOM Diff 鏍稿績绠楁硶瑙ｆ瀽相关的知识，希望对你有一定的参考价值。
瑙傛劅搴︼細馃専馃専馃専馃専馃専
鍙ｅ懗锛氳荆鐐掕姳铔?/strong>
鐑归オ鏃堕棿锛?0min
鏈枃宸叉敹褰曞湪鍓嶇椋熷爞鍚屽悕浠撳簱Github github.com/Geekhyt锛屾杩庡厜涓撮鍫傦紝濡傛灉瑙夊緱閰掕彍杩樼畻鍙彛锛岃祻涓?Star 瀵归鍫傝€佹澘鏉ヨ鏄帿澶х殑榧撳姳銆?/blockquote>鎯宠鎼炴槑鐧?Vue3 鐨?DOM Diff 鏍稿績绠楁硶锛屾垜浠浠庝竴閬?LeetCode 鐪熼璇磋捣銆?/p>
鎴戜滑鍏堟潵涓€璧疯璇婚锛?/p>
LeetCode 鐪熼 300. 鏈€闀夸笂鍗囧瓙搴忓垪
缁欏畾涓€涓棤搴忕殑鏁存暟鏁扮粍锛屾壘鍒板叾涓渶闀夸笂鍗囧瓙搴忓垪鐨勯暱搴︺€?/p>
绀轰緥锛?/p>
杈撳叆: [10,9,2,5,3,7,101,18]
杈撳嚭: 4
瑙ｉ噴: 鏈€闀跨殑涓婂崌瀛愬簭鍒楁槸 [2,3,7,101]锛屽畠鐨勯暱搴︽槸 4銆?/blockquote>璇存槑锛?/p>
- 鍙兘浼氭湁澶氱鏈€闀夸笂鍗囧瓙搴忓垪鐨勭粍鍚堬紝浣犲彧闇€瑕佽緭鍑哄搴旂殑闀垮害鍗冲彲銆?/li>
- 浣犵畻娉曠殑鏃堕棿澶嶆潅搴﹀簲璇ヤ负聽O(n2) 銆?/li>
杩涢樁: 浣犺兘灏嗙畻娉曠殑鏃堕棿澶嶆潅搴﹂檷浣庡埌聽O(nlogn) 鍚?
璇婚缁撴潫銆?/p>
浠€涔堟槸涓婂崌瀛愬簭鍒楋紵
棣栧厛锛屾垜浠渶瑕佸鍩烘湰鐨勬蹇佃繘琛屼簡瑙ｅ拰鍖哄垎锛?/p>
- 瀛愪覆锛氫竴瀹氭槸杩炵画鐨?/li>
- 瀛愬簭鍒楋細瀛愬簭鍒椾笉瑕佹眰杩炵画 渚嬪锛歔6, 9, 12] 鏄?[1, 3, 6, 8, 9, 10, 12] 鐨勪竴涓瓙搴忓垪
- 涓婂崌/閫掑瀛愬簭鍒楋細涓€瀹氭槸涓ユ牸涓婂崌/閫掑鐨勫瓙搴忓垪
娉ㄦ剰锛氬瓙搴忓垪涓厓绱犵殑鐩稿椤哄簭蹇呴』淇濇寔鍦ㄥ師濮嬫暟缁勪腑鐨勭浉瀵归『搴?/code>棰樿В
鍔ㄦ€佽鍒?/h3>
鍏充簬鍔ㄦ€佽鍒掔殑鎬濇兂锛岃繕涓嶄簡瑙ｇ殑鍚屽浠彲浠ョЩ姝ユ垜鐨勮繖绡囦笓鏍忓叆涓棬锛?a href="https://link.segmentfault.com/?url=https%3A%2F%2Fjuejin.im%2Fpost%2F6844904190578278414%23heading-3" rel="nofollow">銆岀畻娉曟€濇兂銆嶅垎娌汇€佸姩鎬佽鍒掋€佸洖婧€佽椽蹇冧竴閿呯倴
鎴戜滑鍙互灏嗙姸鎬?
dp[i]瀹氫箟涓轰互nums[i]杩欎釜鏁扮粨灏?涓€瀹氬寘鎷?nums[i])鐨勬渶闀块€掑瀛愬簭鍒楃殑闀垮害锛屽苟灏?dp[i]鍒濆鍖栦负 1锛屽洜涓烘瘡涓厓绱犻兘鏄竴涓崟鐙殑瀛愬簭鍒椼€?/p>瀹氫箟鐘舵€佽浆绉绘柟绋嬶細
- 褰撴垜浠亶鍘?
nums[i]鏃讹紝闇€瑕佸悓鏃跺姣斿凡缁忛亶鍘嗚繃鐨?nums[j]- 濡傛灉
nums[i] > nums[j]锛?code>nums[i] 灏卞彲浠ュ姞鍏ュ埌搴忓垪nums[j]鐨勬渶鍚庯紝闀垮害灏辨槸dp[j] + 1娉細
(0 <= j < i) (nums[j] < nums[i])const lengthOfLIS = function(nums) { let n = nums.length; if (n == 0) { return 0; } let dp = new Array(n).fill(1); for (let i = 0; i < n; i++) { for (let j = 0; j < i; j++) { if (nums[j] < nums[i]) { dp[i] = Math.max(dp[i], dp[j] + 1); } } } return Math.max(...dp) }
- 鏃堕棿澶嶆潅搴︼細O(n^2)
- 绌洪棿澶嶆潅搴︼細O(n)
杩欓噷鎴戠敾浜嗕竴寮犲浘锛屼究浜庝綘鐞嗚В銆?br>
璐績 + 浜屽垎鏌ユ壘
鍏充簬璐績鍜屼簩鍒嗘煡鎵捐繕涓嶄簡瑙ｇ殑鍚屽浠彲浠ョЩ姝ユ垜鐨勮繖涓ょ瘒涓撴爮鍏ヤ釜闂ㄣ€?/p>
- 銆岀畻娉曟€濇兂銆嶅垎娌汇€佸姩鎬佽鍒掋€佸洖婧€佽椽蹇冧竴閿呯倴
- 浠庨厭妗屾父鎴忕湅浜屽垎鏌ユ壘绠楁硶
杩欓噷鍐嶇粨鍚堟湰棰樼悊瑙ｄ竴涓嬭椽蹇冩€濇兂锛屽悓鏍锋槸闀垮害涓?2 鐨勫簭鍒楋紝
[1,2]涓€瀹氭瘮[1,4]濂斤紝鍥犱负瀹冩洿鏈夋綔鍔涖€傛崲鍙ヨ瘽璇达紝鎴戜滑鎯宠缁勬垚鏈€闀跨殑閫掑瀛愬簭鍒楋紝
灏辫璁╄繖涓瓙搴忓垪涓笂鍗囩殑灏藉彲鑳界殑鎱紝杩欐牱鎵嶈兘鏇撮暱銆?/p>鎴戜滑鍙互鍒涘缓涓€涓?
tails鏁扮粍锛岀敤鏉ヤ繚瀛樻渶闀块€掑瀛愬簭鍒楋紝濡傛灉褰撳墠閬嶅巻鐨?nums[i]澶т簬tails鐨勬渶鍚庝竴涓厓绱?涔熷氨鏄?tails涓殑鏈€澶у€?鏃讹紝鎴戜滑灏嗗叾杩藉姞鍒板悗闈㈠嵆鍙€傚惁鍒欑殑璇濓紝鎴戜滑灏辨煡鎵?tails涓涓€涓ぇ浜?nums[i]鐨勬暟骞舵浛鎹㈠畠銆傚洜涓烘槸鍗曡皟閫掑鐨勫簭鍒楋紝鎴戜滑鍙互浣跨敤浜屽垎鏌ユ壘锛屽皢鏃堕棿澶嶆潅搴﹂檷浣庡埌O(logn)銆?/p>const lengthOfLIS = function(nums) { let len = nums.length; if (len <= 1) { return len; } let tails = [nums[0]]; for (let i = 0; i < len; i++) { // 褰撳墠閬嶅巻鍏冪礌 nums[i] 澶т簬 鍓嶄竴涓€掑瀛愬簭鍒楃殑 灏惧厓绱犳椂锛岃拷鍔犲埌鍚庨潰鍗冲彲 if (nums[i] > tails[tails.length - 1]) { tails.push(nums[i]); } else { // 鍚﹀垯锛屾煡鎵鹃€掑瀛愬簭鍒椾腑绗竴涓ぇ浜庡綋鍓嶅€肩殑鍏冪礌锛岀敤褰撳墠閬嶅巻鍏冪礌 nums[i] 鏇挎崲瀹? // 閫掑搴忓垪锛屽彲浠ヤ娇鐢ㄤ簩鍒嗘煡鎵? let left = 0; let right = tails.length - 1; while (left < right) { let mid = (left + right) >> 1; if (tails[mid] < nums[i]) { left = mid + 1; } else { right = mid; } } tails[left] = nums[i]; } } return tails.length; };
- 鏃堕棿澶嶆潅搴︼細O(nlogn)
- 绌洪棿澶嶆潅搴︼細O(n)
杩欓噷鎴戠敾浜嗕竴寮犲浘锛屼究浜庝綘鐞嗚В銆?br>
娉ㄦ剰锛氳繖绉嶆柟寮忚鏇挎崲鍚庣粍鎴愮殑鏂版暟缁勪笉涓€瀹氭槸瑙ｆ硶涓€涓纭粨鏋滅殑鏁扮粍锛屼絾闀垮害鏄竴鏍风殑锛屼笉褰卞搷鎴戜滑瀵规棰樻眰瑙ｃ€?/code>姣斿杩欑鎯呭喌锛?code>[1,4,5,2,3,7,0]
tails = [1]tails = [1,4]tails = [1,4,5]tails = [1,2,5]tails = [1,2,3]tails = [1,2,3,7]tails = [0,2,3,7]鎴戜滑鍙互鐪嬪埌鏈€鍚?
tails鐨勯暱搴︽槸姝ｇ‘鐨勶紝浣嗘槸閲岄潰鐨勫€间笉姝ｇ‘锛屽洜涓烘渶鍚庝竴姝ョ殑鏇挎崲鐮村潖浜嗗瓙搴忓垪鐨勬€ц川銆?/p>Vue3 DOM Diff 鏍稿績绠楁硶
鎼炴竻妤氫簡鏈€闀块€掑瀛愬簭鍒楄繖閬撶畻娉曢锛屾垜浠啀鏉ョ湅 Vue3 鐨?DOM Diff 鏍稿績绠楁硶灏辩畝鍗曠殑澶氫簡銆?/p>
鎴戠煡閬撲綘宸茬粡杩笉鍙婂緟浜嗭紝浣嗘槸杩欓噷杩樻槸瑕佹彃涓€鍙ワ紝濡傛灉浣犺繕涓嶄簡瑙?React 浠ュ強 Vue2 鐨?DOM Diff 绠楁硶鍙互绉绘杩欎釜閾炬帴杩涜瀛︿範锛屽惊搴忔笎杩涚殑瀛︿範鍙互璁╀綘鏇村ソ鐨勭悊瑙ｃ€?/p>
- Vue.js鎶€鏈彮绉?/a>
鍥炴潵鍚庢垜浠€濊€冧竴涓棶棰橈細
Diff 绠楁硶鐨勭洰鐨勬槸浠€涔堬紵涓轰簡鍑忓皯 DOM 鎿嶄綔鐨勬€ц兘寮€閿€锛屾垜浠灏藉彲鑳界殑澶嶇敤 DOM 鍏冪礌銆傛墍浠ユ垜浠渶瑕佸垽鏂嚭鏄惁鏈夎妭鐐归渶瑕佺Щ鍔紝搴旇濡備綍绉诲姩浠ュ強鎵惧嚭閭ｄ簺闇€瑕佽娣诲姞鎴栧垹闄ょ殑鑺傜偣銆?/strong>
濂戒簡锛岃繘鍏ユ湰鏂囩殑姝ｉ锛孷ue3 DOM Diff 鏍稿績绠楁硶銆?/p>
棣栧厛鎴戜滑瑕佹悶娓呮锛屾牳蹇冪畻娉曠殑鐨勪綅缃€傛牳蹇冪畻娉曞叾瀹炴槸褰撴柊鏃?children 閮芥槸澶氫釜瀛愯妭鐐圭殑鏃跺€欐墠浼氳Е鍙戙€?/p>
涓嬮潰杩欐浠ｇ爜灏辨槸 Vue3 鐨?DOM Diff 鏍稿績绠楁硶锛屾垜鍔犱笂浜嗗湪婧愮爜涓殑璺緞锛屾柟渚夸綘鏌ユ壘銆?/p>
// packages/runtime-core/src/renderer.ts function getSequence(arr: number[]): number[] { const p = arr.slice() const result = [0] let i, j, u, v, c const len = arr.length for (i = 0; i < len; i++) { const arrI = arr[i] if (arrI !== 0) { j = result[result.length - 1] if (arr[j] < arrI) { p[i] = j result.push(i) continue } u = 0 v = result.length - 1 while (u < v) { c = ((u + v) / 2) | 0 if (arr[result[c]] < arrI) { u = c + 1 } else { v = c } } if (arrI < arr[result[u]]) { if (u > 0) { p[i] = result[u - 1] } result[u] = i } } } u = result.length v = result[u - 1] while (u-- > 0) { result[u] = v v = p[v] } return result }
getSequence鐨勪綔鐢ㄥ氨鏄壘鍒伴偅浜涗笉闇€瑕佺Щ鍔ㄧ殑鍏冪礌锛屽湪閬嶅巻鐨勮繃绋嬩腑锛屾垜浠彲浠ョ洿鎺ヨ烦杩囦笉杩涜鍏朵粬鎿嶄綔銆?/p>鍏跺疄杩欎釜绠楁硶鐨勬牳蹇冩€濇兂灏辨槸鎴戜滑涓婇潰璁插埌鐨勬眰瑙ｆ渶闀块€掑瀛愬簭鍒楃殑绗簩绉嶈В娉曪紝璐績 + 浜屽垎鏌ユ壘娉曘€傝繖涔熸槸涓轰粈涔堜笉鐫€鎬ヨ瀹冪殑鍘熷洜锛屽洜涓哄鏋滀綘鐪嬫噦浜嗕笂闈㈢殑
LeetCode棰樿В锛屼綘灏卞凡缁忔帉鎻′簡Vue3鐨?DOM Diff鏍稿績绠楁硶鐨勬€濇兂鍟︺€?/p>涓嶈繃锛屾兂瑕佹悶鎳傛瘡涓€琛屼唬鐮佺殑缁嗚妭锛岃繕闇€鏀惧埌
Vue3鏁翠釜DOM Diff鐨勪笂涓嬫枃涓幓鎵嶈銆傝€屼笖闇€瑕佹敞鎰忕殑鏄紝涓婇潰浠ｇ爜涓殑getSequence鏂规硶鐨勮繑鍥炲€间笌LeetCode棰樹腑鎵€瑕佹眰鐨勮繑鍥炲€间笉鍚岋紝getSequence杩斿洖鐨勬槸鏈€闀块€掑瀛愬簭鍒楃殑绱㈠紩銆備笂鏂囨垜浠浘鎻愬埌杩囷紝浣跨敤璐績 + 浜屽垎鏌ユ壘鏇挎崲鐨勬柟寮忓瓨鍦ㄤ竴浜?Bug锛屽彲鑳戒細瀵艰嚧缁撴灉涓嶆纭€俈ue3 鎶婅繖涓棶棰樿В鍐虫帀浜嗭紝涓嬮潰鎴戜滑鏉ヤ竴璧风湅涓€涓嬪畠鏄浣曡В鍐崇殑銆?/p>// packages/runtime-core/src/renderer.ts function getSequence(arr: number[]): number[] { const p = arr.slice() // 鎷疯礉涓€涓暟缁?p const result = [0] let i, j, u, v, c const len = arr.length for (i = 0; i < len; i++) { const arrI = arr[i] // 鎺掗櫎绛変簬 0 鐨勬儏鍐? if (arrI !== 0) { j = result[result.length - 1] // 涓庢渶鍚庝竴椤硅繘琛屾瘮杈? if (arr[j] < arrI) { p[i] = j // 鏈€鍚庝竴椤逛笌 p 瀵瑰簲鐨勭储寮曡繘琛屽搴? result.push(i) continue } // arrI 姣?arr[j] 灏忥紝浣跨敤浜屽垎鏌ユ壘鎵惧埌鍚庢浛鎹㈠畠 // 瀹氫箟浜屽垎鏌ユ壘鍖洪棿 u = 0 v = result.length - 1 // 寮€鍚簩鍒嗘煡鎵? while (u < v) { // 鍙栨暣寰楀埌褰撳墠浣嶇疆 c = ((u + v) / 2) | 0 if (arr[result[c]] < arrI) { u = c + 1 } else { v = c } } // 姣旇緝 => 鏇挎崲 if (arrI < arr[result[u]]) { if (u > 0) { p[i] = result[u - 1] // 姝ｇ‘鐨勭粨鏋? } result[u] = i // 鏈夊彲鑳芥浛鎹細瀵艰嚧缁撴灉涓嶆纭紝闇€瑕佷竴涓柊鏁扮粍 p 璁板綍姝ｇ‘鐨勭粨鏋? } } } u = result.length v = result[u - 1] // 鍊掑彊鍥炴函 鐢?p 瑕嗙洊 result 杩涜€屾壘鍒版渶缁堟纭殑绱㈠紩 while (u-- > 0) { result[u] = v v = p[v] } return result }Vue3 閫氳繃鎷疯礉涓€涓暟缁勶紝鐢ㄦ潵瀛樺偍姝ｇ‘鐨勭粨鏋滐紝鐒跺悗閫氳繃鍥炴函璧嬪€肩殑鏂瑰紡瑙ｅ喅浜嗚椽蹇?+ 浜屽垎鏌ユ壘鏇挎崲鏂瑰紡鍙兘閫犳垚鐨勫€间笉姝ｇ‘鐨勯棶棰樸€?/p>
浠ヤ笂灏辨槸 Vue3 DOM Diff 鐨勬牳蹇冪畻娉曢儴鍒嗗暒锛屾杩庡厜涓村墠绔鍫傦紝瀹㈠畼鎮ㄦ參璧帮綖
鉂わ笍鐖卞績涓夎繛鍑?/h2>
1.濡傛灉浣犺寰楅鍫傞厭鑿滆繕鍚堣儍鍙ｏ紝灏辩偣涓禐鏀寔涓嬪惂锛屼綘鐨?strong>璧?/strong>鏄垜鏈€澶х殑鍔ㄥ姏銆?/p>
2.鍏虫敞鍏紬鍙峰墠绔鍫傦紝鍚冨ソ姣忎竴椤块キ锛?/strong>
3.鐐硅禐銆佽瘎璁恒€佽浆鍙?=== 鍌洿锛?/p>
以上是关于Vue3 DOM Diff 鏍稿績绠楁硶瑙ｆ瀽的主要内容，如果未能解决你的问题，请参考以下文章
