Vue2的diff算法

diff算法的目的是為了找出需要更新的節點,而未變化的節點則可以復用

新舊列表的頭尾先互相比較。未找到可復用則開始遍歷,對比過程中指針逐漸向列表中間靠攏,直到遍歷完其中一個列表

具體策略如下:

  1. 同層級比較
    Vue2的diff算法只會比較同一層級的節點,不會跨層級比較。

  2. 雙指針法(雙端比較)
    Vue2從新舊虛擬DOM樹的頭部和尾部開始比較
    頭頭比較:如果新舊節點的頭部相同,則直接更新節點并移動頭部指針。
    尾尾比較:如果新舊節點的尾部相同,則直接更新節點并移動尾部指針。
    頭尾交叉比較:如果舊節點的頭部與新節點的尾部相同,則將舊節點移動到尾部,并移動指針。
    尾頭交叉比較:如果舊節點的尾部與新節點的頭部相同,則將舊節點移動到頭部,并移動指針。

  3. Vue2通過 key 屬性來優化節點的復用。如果新舊節點的 key 相同,則認為它們是同一個節點,只需更新屬性和內容;否則會進行插入、刪除或移動操作 。

  4. 節點類型不同:直接替換整個節點。節點類型相同:比較節點的屬性和子節點,遞歸調用diff算法處理子節點 。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/82908.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/82908.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/82908.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

mongodb集群之分片集群

目錄 1. 適用場景2. 集群搭建如何搭建搭建實例Linux搭建實例(待定)Windows搭建實例1.資源規劃2. 配置conf文件3. 按順序啟動不同角色的mongodb實例4. 初始化config、shard集群信息5. 通過router進行分片配置 1. 適用場景 數據量大影響性能 數據量大概達到千萬級或億級的時候&…

DEEPSEEK幫寫的STM32消息流函數,直接可用.已經測試

#include "main.h" #include "MessageBuffer.h"static RingBuffer msgQueue {0};// 初始化隊列 void InitQueue(void) {msgQueue.head 0;msgQueue.tail 0;msgQueue.count 0; }// 檢查隊列狀態 type_usart_queue_status GetQueueStatus(void) {if (msgQ…

華為歐拉系統中部署FTP服務與Filestash應用:實現高效文件管理和共享

華為歐拉系統中部署FTP服務與Filestash應用:實現高效文件管理和共享 前言一、相關服務介紹1.1 Huawei Cloud EulerOS介紹1.2 Filestash介紹1.3 華為云Flexus應用服務器L實例介紹二、本次實踐介紹2.1 本次實踐介紹2.2 本次環境規劃三、檢查云服務器環境3.1 登錄華為云3.2 SSH遠…

React---day5

4、React的組件化 組件的分類: 根據組件的定義方式,可以分為:函數組件(Functional Component )和類組件(Class Component);根據組件內部是否有狀態需要維護,可以分成:無狀態組件(Stateless Component )和…

測試策略:AI模型接口的單元測試與穩定性測試

測試策略:AI模型接口的單元測試與穩定性測試 在構建支持AI能力的系統中,開發者不僅要關注業務邏輯的正確性,也必須保障AI模型接口在各種環境下都能穩定運行。這就要求我們在開發階段制定清晰的測試策略,從功能驗證到性能保障,逐步推進系統可用性、可維護性與可擴展性的提…

UniApp 生產批次管理模塊技術文檔

UniApp 生產批次管理模塊技術文檔 1. 運行卡入站頁面 (RunCardIn) 1.1 頁面結構 <template><!-- 頁面容器 --><view class"runCardIn" :style"{ paddingTop: padding }"><!-- 頁頭組件 --><pageHeader :title"$t(MENU:…

針對Helsinki-NLP/opus-mt-zh-en模型進行雙向互翻的微調

引言 ?題目聽起來有點怪怪的&#xff0c;但是實際上就是對Helsinki-NLP/opus-mt-en-es模型進行微調。但是這個模型是單向的&#xff0c;只支持中到英的翻譯&#xff0c;反之則不行。這樣的話&#xff0c;如果要做中英雙向互翻就需要兩個模型&#xff0c;那模型體積直接大了兩倍…

Object轉Map集合

對象與 Map 轉換詳解&#xff1a; Object.entries() 和 Object.fromEntries() 1&#xff0c;Object.fromEntries() 的主要用途就是將鍵值對集合&#xff08;如 Map&#xff09;轉換為普通對象。 2&#xff0c;Object.entries() 返回一個二維數組&#xff0c;其中每個子數組包…

優先隊列用法

第 5 行定義了一個隊首是最大值的優先隊列,第 10 行的輸出如下: 27 - wuhan 21 - shanghai 11 - beijing 第 13 行定義了一個隊首是最小值的優先隊列,第 19 行的輸出如下: 11 - beijing 21 - shanghai 27 - wuhan #include <bits/stdc.h> using namespace std; int…

Spring Boot3.4.1 集成redis

Spring Boot3.4.1 集成redis 第一步 引入依賴 <!-- redis 緩存操作 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <!-- pool 對象池 …

Replacing iptables with eBPF in Kubernetes with Cilium

source: https://archive.fosdem.org/2020/schedule/event/replacing_iptables_with_ebpf/attachments/slides/3622/export/events/attachments/replacing_iptables_with_ebpf/slides/3622/Cilium_FOSDEM_2020.pdf 使用Cilium&#xff0c;結合eBPF、Envoy、Istio和Hubble等技術…

英一真題閱讀單詞筆記 05年

2005 年 Text 1 第一段 序號 單詞 音標 詞義 1 fat [ft] a. 豐厚的&#xff0c;巨額的&#xff1b;肥胖的 2 pay [pe?] n. 薪水 3 rise [ra?z] n. 上漲&#xff0c;增加&#xff1b;斜坡 4 pleasure [ple??(r)] n. 快樂&#xff1b;樂事 5 pleasure a…

FastAPI集成APsecheduler的BackgroundScheduler+mongodb(精簡)

項目架構&#xff1a; FastAPI(folder) >app(folder) >core(folder) >models(folder) >routers(folder) >utils(folder) main.py(file) 1 utils文件夾下新建schedulers.py from apscheduler.schedulers.background import BackgroundScheduler from apschedu…

聊一聊接口測試中耗時請求如何合理安排?

目錄 一、異步處理與輪詢機制 輪詢檢查機制 二、 并行化測試執行 三、模擬與樁技術&#xff08;Mock/Stub&#xff09; 四、動態超時與重試策略 五、測試架構設計優化 分層測試策略 并行化執行 網絡優化 六、測試用例分層管理 金字塔策略 七、 緩存與數據復用 響應…

深入詳解DICOMweb:WADO與STOW-RS的技術解析與實現

&#x1f9d1; 博主簡介&#xff1a;CSDN博客專家、CSDN平臺優質創作者&#xff0c;高級開發工程師&#xff0c;數學專業&#xff0c;10年以上C/C, C#, Java等多種編程語言開發經驗&#xff0c;擁有高級工程師證書&#xff1b;擅長C/C、C#等開發語言&#xff0c;熟悉Java常用開…

Splunk Validated Architecture (SVA):構建企業級可觀測性與安全的基石

Splunk Validated Architecture (SVA) 是 Splunk 官方提供的一套經過嚴格測試、性能驗證和最佳實踐指導的參考架構藍圖。它并非單一固定方案&#xff0c;而是根據企業數據規模、性能需求、高可用性目標和合規要求&#xff0c;提供一系列可落地的部署模型。SVA 的核心價值在于為…

Armv7l或樹莓派32位RPI 4B編譯faiss

pip3 install faiss-cpu當然找不到預編譯的包 手動下載 git clone https://github.com/facebookresearch/faiss.git cd faiss #能需要切換到特定版本標簽&#xff0c;例如 v1.7.1&#xff0c;這個版本Cmake 3.18可以過&#xff0c;因為apt install安裝的cmake只更新到這里&am…

C++之string的模擬實現

string 手寫C字符串類類的基本結構與成員變量一、構造函數與析構函數二、賦值運算符重載三、迭代器支持四、內存管理與擴容機制五、字符串操作函數六、運算符重載總結 手寫C字符串類 從零實現一個簡易版std::string 類的基本結構與成員變量 namespace zzh { class string { …

修改Docker鏡像源

配置文件位置&#xff1a; sudo vim /etc/docker/daemon.json Docker 或 containerd 的鏡像加速器配置&#xff0c;旨在提高從 Docker Hub 拉取鏡像的速度。 { "features": { "buildkit": true, "containerd-snapshotter": true }, …

服務器帶寬線路的區別(GIA、CN2、BGP、CMI等)

服務器帶寬線路的區別&#xff08;GIA、CN2、BGP、CMI等&#xff09; 一、BGP線路 1. 定義與技術特點 BGP&#xff08;Border Gateway Protocol&#xff0c;邊界網關協議&#xff09;是一種用于不同自治系統&#xff08;AS&#xff09;之間交換路由信息的協議&#xff0c;屬…