1、前言

這個構(gòu)想實際上來源于一個全選的組件拧晕；即一開始的目的是做一個全選組件睛榄，然后在完成的時候被告知可能有多層級列表的情況；由于項目所用的vux組件庫沒有tree這個組件落剪；于是干脆想著改造一下嘗試實現(xiàn)一個tree結(jié)構(gòu)睁本。

2、實現(xiàn)

? ? 2.1忠怖、局限和前提

? ? ? ? 2.1.1呢堰，發(fā)現(xiàn)無法在子節(jié)點里直接修改節(jié)點的props傳過來的值了

????????????解決方案：

????????????????在每一層子節(jié)點的data屬性里定義一個變量，用于存儲深拷貝(props傳過來的值)后的值

????????????????深拷貝方法用Object.assign

? ? ? ? 2.1.2凡泣，由于無法直接在子節(jié)點里直接修改props傳過來的值枉疼，那么會出現(xiàn)以下情況

????????????????1）子節(jié)點里的狀態(tài)發(fā)生變更時皮假，得一層一層冒泡到根節(jié)點才能去修改當(dāng)前Tree渲染的數(shù)據(jù)源里對應(yīng)的分支節(jié)點的數(shù)據(jù)，因為骂维，對于每一層子節(jié)點而言惹资，它的數(shù)據(jù)源來源于上一節(jié)點通過props傳過來的數(shù)據(jù)

????????????????2）深拷貝雖然解決了在子節(jié)點的作用域下的一些狀態(tài)無法發(fā)生變更（這句話的意思是，比如當(dāng)前節(jié)點有一個屬性控制下一分支列表的顯隱航闺，那么當(dāng)該分支列表的結(jié)構(gòu)層的渲染數(shù)據(jù)直接取得props傳過來的data褪测，由于該data不能修改，那么該屬性控制顯隱的功能就失效了）

? ? ? ????????????但是同時也帶來了父節(jié)點與子節(jié)點的解耦潦刃，當(dāng)父節(jié)點的數(shù)據(jù)源發(fā)生變更時侮措，如果不去watch的話，是沒辦法及時通知子節(jié)點發(fā)生對應(yīng)屬性的變更的乖杠；而vue的生命周期在組件層次只有mounted可以用萝毛，而該生命周期在一次會話里只會執(zhí)行一次，即父節(jié)點的變動不會引發(fā)子節(jié)點的mounted周期滑黔；（若是想，似乎可以考慮在父節(jié)點引用的子節(jié)點出綁定一個key）

????????????????即<div class='parent'>

????????????????????????<child-component????:key = 'data.id'????:data = 'data' />

? ???????????????? </div>

? ? 2.2环揽、樹組件的具體實現(xiàn)

? ? ? ? 2.2.1略荡、前提

????????????1）下行邏輯：

????????????????對于每一個分支節(jié)點而言，它既是上一個節(jié)點的子節(jié)點歉胶，同樣也是下一分支樹的根節(jié)點汛兜；對于每一個分支節(jié)點而言，如果它被選中了通今，則其下如果有分支（樹）粥谬，則都會被選中，這是全選的概念

????????????2）上行邏輯：

????????????????由于每一個分支節(jié)點同時是上一節(jié)點的子節(jié)點辫塌，那么意味著漏策，當(dāng)它被選中時，上一分支節(jié)點需要做全選判斷（如果該分支下所有子節(jié)點都處于選中狀態(tài)臼氨，則該分支節(jié)點處于全選狀態(tài)）

? ? ? ? 2.2.2掺喻、思路：

????????????????1）選中和取消選中用兩個數(shù)組來實現(xiàn)（下邊將選中的存儲數(shù)組定義為a, 取消的為b）:

????????????????????每一個分支節(jié)點在執(zhí)行選中操作時，往a數(shù)組里推進(jìn)該分支節(jié)點储矩，同時判斷該分支節(jié)點是否存在于b數(shù)組里感耙，若存在，則將其從b數(shù)組中取出

????????????????????每一個分支節(jié)點在執(zhí)行取消選中時持隧，往b數(shù)組里推進(jìn)該分支節(jié)點即硼，同時判斷a數(shù)組里是否存在該節(jié)點，若存在屡拨，則取出

? ? ? ? ? ? ? ? 2）自上而下的操作：

????????????????????每一個分支節(jié)點在執(zhí)行選中（取消）時只酥，在將該節(jié)點的選中狀態(tài)改變后褥实，若該節(jié)點下存在分支（樹），則循環(huán)遍歷調(diào)用每一個子節(jié)點的選中操作方法层皱，并將（父節(jié)點的）變更后的選中狀態(tài)傳遞下去性锭，如圖：

? ??????????????????

? ? ? ? ? ? ? ? ? ? 由于Tree在實現(xiàn)的過程中，本身就是遞歸調(diào)用分支樹組件的形式來實現(xiàn)叫胖，所以上述的邏輯會層層調(diào)用草冈，最終實現(xiàn)自上而下的狀態(tài)變更

????????????????3）自下而上的操作：

????????????????????由于前提2，每一個分支節(jié)點在選中的狀態(tài)發(fā)生變更后瓮增，需要將狀態(tài)更新至其上一層節(jié)點怎棱，并在上一層節(jié)點里觸發(fā)全選的判斷，該判斷需要區(qū)分取消和選中兩種狀態(tài)绷跑，不然會引發(fā)整個樹的狀態(tài)紊亂：

????????????????????基于思路1：

????????????????????????在父節(jié)點里拳恋，若觸發(fā)全選判斷的子節(jié)點的狀態(tài)為取消選中, 則該父節(jié)點無論之前什么狀態(tài)，此時應(yīng)該為取消選中狀態(tài)砸捏，具體實現(xiàn)：

? ? ????????????????????上述思路為：若當(dāng)前父節(jié)點下的所有子節(jié)點里谬运，只要有一個子節(jié)點不存在于選中列表（該列表用于存放所有處于選中狀態(tài)的節(jié)點），則取消該父節(jié)點的選中狀態(tài)垦藏；同時需要將其從選中列表中剔除梆暖；并且需要冒泡到上層節(jié)點

? ? ????????????????????若觸發(fā)全選判斷的子節(jié)點的狀態(tài)為選中狀態(tài)，則需要判斷當(dāng)前取消選中的列表集里是否存在當(dāng)前父節(jié)點下的直屬子節(jié)點掂骏，只要有一個符合條件轰驳，意味著當(dāng)前父節(jié)點下存在未選中的節(jié)點；否則該父節(jié)點處于全選狀態(tài)弟灼，具體實現(xiàn)：

? ??????

? ????????????????????上述思路為：當(dāng)該節(jié)點下的所有子節(jié)點處于選中狀態(tài)（即不存在于未選中列表集里）時级解，將該節(jié)點的選中狀態(tài)置為true；同時往選中列表集里推入該父節(jié)點田绑；同時向上層冒泡觸發(fā)上層節(jié)點的全選判斷

????????????????4）選中/取消選中的相關(guān)實現(xiàn)：

? ? ? ???????????????? 選中/取消選中需要實現(xiàn)以下邏輯：

????????????????????????????a）變更當(dāng)前的選中狀態(tài)

????????????????????????????b）(遞歸)調(diào)用下一節(jié)點的選中/取消的方法

????????????????????????????c）根據(jù)當(dāng)前節(jié)點的選中狀態(tài)來決定是推入a數(shù)組還是b數(shù)組（a勤哗、b數(shù)組為3.2.2的思路1）里提到的兩個集合）

? ? ? ? ? ? ? ? ? ? ? ? ? ? d）若當(dāng)前節(jié)點的選中/取消方法是點擊觸發(fā)的，則觸發(fā)上層冒泡事件（需要判斷是點擊與否是因為如果不判斷掩驱，由于邏輯b會遞歸調(diào)用子節(jié)點的方法俺陋，則最終會形成一次自下而上（至當(dāng)前節(jié)點終止）的冒泡事件調(diào)用，而實際上自上而下的過程中就已經(jīng)決定了在該分支樹上的節(jié)點判斷昙篙，所以此時發(fā)生在該分支樹上的冒泡是多余的

????????????????????????????具體實現(xiàn)：

? ??????????????????????

3腊状、優(yōu)化與完善

????????????實現(xiàn)過程中有個意外的bug：這個bug是這么產(chǎn)生的，由于我在選中的冒泡邏輯里做了如下出來：

????????????這個邏輯有個致命之處在于最開始的時候如果從下層節(jié)點開始選擇苔可，則未選中節(jié)點列表unKeys一開始是空的缴挖，這意味著會出現(xiàn)如下情況：

????????????????1）一個父節(jié)點有a、b焚辅、c三個節(jié)點

????????????????2）當(dāng)a節(jié)點被選中的時候映屋，盡管b和c節(jié)點沒有被選中苟鸯，但由于unKeys為空，那么b棚点，c節(jié)點順利繞過了判斷

????????????????3）于是checkAll的值成了true

????????????????4）于是開始進(jìn)行錯誤的冒泡

????????????????然后早处，優(yōu)化后的實現(xiàn)：