今天做了一個案例，可以好好做做能夠將之前的內容結合起來，最主要的是能對組件化編碼流程有一個大概的清晰認知，這一套做下來，明天自己再做一遍複習一下，其實組件化流程倒是基本上沒什麼問題了，主要是很多vue的方法需要多熟悉一下，畢竟打破了之前的一些對於傳統js的認知，還需要多熟悉一下。
這兩天可能內容不是很多，因為有點感冒了，狀態不是很好，不想學多了怕接受的是不是很好。

六.TODOList案例

做這個案例主要是為了能夠熟悉組件化編碼流程，剛開始學做一個項目最好按照以下三個步驟來

1.實現靜態組件

先把一個項目抽取組件，使用組件實現靜態頁面

比如這個案例App的子組件就可以拆分為三個上面輸入框，中間列表展示，下麵總結欄，其實組件的劃分就是按照他的功能點來劃分的，

比如子組件按照功能劃分了三個組件，list里每一個item是不是有自己的功能可以勾選，可以刪除，所以又可以進一步細分組件（如果你拆完一個組件發現很難起名字，說明你拆的不是很合理）

• 既然已經拆分好組件了，就可以去vue項目裡面寫我們的組件了，創建、導入、註冊三步曲完成

• 接下來應該有我們的靜態模板了，是這樣的，一般情況下我們的一個項目大多數已經完成了一些了，所以不會從零開始，這個時候老闆派給你個任務叫你把這個實現組件化開發，你就直接把html先一股腦的塞到 App.vue裡面，可以啟動伺服器看到整體的一個效果，然後再去一步一步把代碼拆分進我們的組件裡面去

  註意：有很多問題是語法報錯，將那個lintonsave關閉即可

• 然後就可以開始拆分了,其他不說這個list裡面每一條數據看出了拆分組件的重要性，我直接在list組件復用item就可以了

  

• css拆分時要註意：base等公共樣式放在App.vue，其他各自的樣式各回各家但是要註意添加scoped

2.展示動態數據

將我們項目中需要動態真實的數據存起來 一般是數組加對象的的形式，一個對象一條數據裡面有id、name等等

那麼數據一般保存在哪裡？ 回顧一下之前props的案例，我們的數據是不是寫在父組件裡面的，通過子組件標簽傳給了他，子組件才能用props來接受外部傳來的數據，所以我們的數據要定義在每條數據這個組件的父組件

在我們定義數據這裡幾個註意點：

• id為什麼用字元串，因為數值型會有上限，字元串沒有
• 既然數據都有了，所以這裡就不用一個一個去寫子組件標簽了直接v-for列表渲染
• 最關鍵的：我們要將數據傳到子組件裡面去吧，這裡不再是像以前那樣，一個一個傳，這裡直接是傳的一個對象，而且還是遍歷出來的每一條對象，還必須要動態綁定，不動態綁定這裡就是一個字元串

子組件這邊，註意一下props接受參數要用引號包裹，然後就是怎麼來讓我們的覆選框動態的獲取到有沒有勾選，讓其動態綁定值為我們數據裡面的值即可

3.添加

首先我們實現回車添加數據的邏輯，肯定是要生成一個對象然後添加進那個數組裡面，這裡的id由於滅有資料庫支持，就採用了一個包，uuid可以生成全球唯一id，但是他體積表較大，這裡用的是另一個體積小一點的 nanoid

接下來問題就來了，我們這個數據是在header裡面添加的，而我們的數據是在list，我們學過父組件給子組件傳數據（props），但是沒有學過兄弟關係來傳數據吧，這裡才去最基礎的方法來實現

我們吧list裡面定義的數據data放到app組件裡面去，然後app通過動態綁定將數據傳到list的組件標簽，這個時候list用props來接受傳過來的值

最主要的是怎麼把子組件header傳到父組件app裡面去：我們在app定義一個函數然後接受形參，將這個函數動態綁定給到header，header通過props就能夠得到這個函數，然後重要的一步 我將這個函數寫在鍵盤事件裡面，同時參數是我們的創建的數據，就相當於調用了這個函數，調用不要緊，關鍵是這個函數式app送給你用的，你調用（送給你用的所以拿過來是存在於vc實例對象上）拿我app不就拿到了這個參數嗎所以，app現在又有參數，又定義了數據，那麼添加的邏輯就開始了

4.勾選

我們要在item裡面來勾選，從而影響到數據裡面的completed這個選項，我們的數據是定義在App裡面的，有一句話叫做 數據在哪裡，那麼處理數據的方法就寫在哪裡，所以這裡好像又要用到子組件給父組件東西了，給什麼？我勾選的狀態實在item里進行的，我必須拿到勾選的這一個id，才能在處理數據的方法裡面以id為參數對數據記性遍歷找到對應的那一個將他的completed的值改為非值

這裡有一個註意點，把我們之前這個勾選的所有邏輯推翻，直接在item的input標簽裡面寫一個v-model，我們說覆選框v-model預設收集的是checked的值，如果我把v-model設置為todo.completed是不是就讓我們的checked動態綁定了，他為true，checked就為true，第一步初始化數據的勾選完成了，這裡還有一個更重要的，你該數據也同樣可以改到data裡面的數據，因為v-model本身就是雙向綁定，但是我們前面也說過，props接收到的數據不能改，這裡很明顯是通過props傳過來的數據改到的，為什麼這裡沒報錯呢，因為vue對於對象改動的檢測有點類似於 const，一般數據確實數據變了就是改動了，但是數組和對象通過屬性名或者下標去改某一個值並不叫改動，要變動整個數組和對象才叫改動，所以這裡沒有報錯，這個方法是簡單但是，官方定義的props傳過來的數據不能改，最好還是不要改，萬一哪天這個數據不是對象里的值了，就麻煩了，最好還是按照語法規則來

5.刪除

主題邏輯剛上面差不多，點擊刪除返回id，app傳過來一個函數接受這個id，然後數組的篩選方法filter讓我們的數據等於篩選出來的新數組，這裡就不考慮性能問題了，假裝是個標記刪除吧，刪除了雖然還在但是也永遠不會給你顯示出來了，所以可以直接把他賦值給這個原數據，還有一個點confirm確認框，會彈出一個對話框內容為你傳進去的參數，配合if來使用可以達到只有你點擊確定了才會執行後面的邏輯

6.底部統計

既然是統計，那肯定要用計算節點來做，這裡用到了數組的reduce方法，要註意的是，prev每次返回要等於他自己

7.底部交互

先完成我們點擊了所有的勾選框，下麵全選會勾上，但凡少勾選一個都不會鉤上的邏輯，其實很簡單，將我們全部的這個數量也弄成一個計算屬性，然後將我們全選動態綁定，且返回值也由計算屬性來決定，直接去比較已完成和全部是否相等

探後就是我們的全選功能，邏輯是這樣，點擊一下，通過e獲取他的checked的值，然後又要動到數據了，需要app裡面對數組做一個迴圈對所有的數據的completed的值都等於這個checked的值

但是這樣有一個bug，當我們刪完後，會是勾選狀態，應該為不勾選並且隱藏掉

在我們剛纔完成點擊點擊上面，下麵全選也會對應去勾選上那裡的邏輯完善一下，因為原來的寫法，就是當已完成和總數一樣的時候就會勾選上，那麼最後刪完了，也是一樣的所以不行

通過v-if添加在footer即可

好了，可以忘掉這一章節實現的功能了，簡便方法他來了

我們這裡的全選框有些啥子東西，一個管初始化讀取數據的，一個改數據的，又是input，讀寫，想到他沒有v-model

我們用v-model去綁定isAll的值也就是判斷有沒有全選的值，即可完成讀的操作，仔細想想是不是

但是這裡改的話會報錯，為什麼？

因為我們的isAll是計算屬性，你改動他的值，你setter都沒有怎麼改，所以這裡要這麼做，定義一個setter，並且把這個值給到我們剛纔定義的迴圈讓所有值都等於這個checked的App組件上的函數

為什麼這裡可以使用v-model前面是因為那個值時props傳過來的值肯定不能改，而這裡是我們寫在這個組件的計算屬性屬於自己的

8.清除已完成的任務

最後一個功能，很簡單直接一個點擊事件，在app這邊做一個數組篩選，篩選的是completed沒被選中的

9.總結

組件化編碼流程

• 拆分靜態組件，按照功能拆分
• 實現動態組件，考慮好數據的位置，如果數據是一個組件在用就放到這個組件，如果數據是一些組件在用，就放到他們的共同的父組件（這種方法也叫做狀態提升）
• 實現交互（從綁定事件開始）
• props不僅適合父給子傳數據，還可以子給父傳數據（父會給子一個函數）
• v-model註意修改的值是不是props過來的，不是他過來的還是可以用的還是很方便的
• 修改對象裡面的值跟const一樣改單個值不會被髮現，要修改整個對象