今天做了一個案例，可以好好做做能夠將之前的內容結合起來，最主要的是能對元件化編碼流程有一個大概的清晰認知，這一套做下來，明天自己再做一遍複習一下，其實元件化流程倒是基本上沒什麼問題了，主要是很多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一樣改單個值不會被發現，要修改整個物件