爲了直觀的感覺diff算法，我把虛擬DOM和diff一塊兒實現了

網上搜到的資料裏，講diff的把虛擬DOM一帶而過，講虛擬DOM的就把diff一帶而過，並且無法直觀的感覺diff的效果，因而...

我搜集了一些資料，把它倆一併實現了，其中虛擬DOM的實現參考：

1. Create your own virtual DOM to understand it (Part 1)
2. Create your own virtual DOM to understand it (Part 2)

diff算法的實現參考：

1. Vue2.0的diff算法分析

實現效果以下

• 要渲染的列表的初始值

list = ['a1', 'b2', 'c3', 'd4', 'e5']
複製代碼

• 渲染結果

• 2秒後改變爲

list = ['a1', 'd4', 'b2', 'c3', 'e5', 'f6']
複製代碼

• diff效果，綠色的爲改變的DOM結果

• 5秒後改變爲

list = ['e5', 'd4', 'f6', 'c3', 'a1', 'b2']
複製代碼

• diff效果，綠色的爲改變的DOM結果

倉庫地址

點我跳到倉庫地址

或

github.com/xubaifuCode…

最後

歡迎 fork 回去改爲本身喜歡的樣子~