vue2 diff路程
时间: 2023-08-29 21:09:07 浏览: 45
Vue.js的diff算法是用来比较新旧虚拟节点(VNode)的差异,并将差异应用到真实的DOM树上,以更新视图。具体的diff过程如下:
1. 用JavaScript对象结构表示DOM树的结构,并构建一个真正的DOM树,插入到文档中。
2. 当状态发生变更时,重新构建一棵新的对象树。
3. 对比新旧树的差异(diff),记录差异。
4. 将第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch),从而更新视图。
在比较过程中,会根据节点的类型和属性进行判断和比较。如果节点类型相同且属性相同,则认为是相同的节点,直接复用旧节点。如果节点类型不同或属性不同,则认为是不同的节点,需要创建新的真实节点。
具体的比较方式是通过遍历新旧节点的子节点,按照顺序进行比较。如果发现相同的节点,则复用旧节点,并将旧节点的索引移动到下一个节点。如果发现不同的节点,则创建新的真实节点,并将新节点的索引移动到下一个节点。
总结来说,Vue.js的diff算法通过比较新旧虚拟节点的差异,将差异应用到真实的DOM树上,以实现高效的视图更新。
#### 引用[.reference_title]
- *1* *2* *3* [vue中的diff算法](https://blog.csdn.net/weixin_43638968/article/details/112686317)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)