@
- 概述
- 前端程式碼
- 本人其他相關文章連結
概述
前面文章案例已經練習了父子元件之間的通訊，這一節講述如何把todos陣列放進本地快取中，因為實際開發場景中頻繁查詢的資料很有可能會用到本地快取技術。
思考：如何改成使用本地快取，是寫一堆按鈕每次觸發就是往本地快取種get和set？答案是錯誤的，因為太複雜了會寫一堆的get和set方法
正確答案：使用監聽watch屬性，因為只要監聽到資料改變 =》 往本地快取種新增監聽改變後的資料就行，這樣就能實現本地快取的更新。
前端程式碼
App.vue 只寫了程式碼不同的地方
export default {
data() {
return {
//由於todos是MyHeader元件和MyFooter元件都在使用，所以放在App中（狀態提升）
todos:JSON.parse(localStorage.getItem('todos')) || []
}
},
watch: {
todos:{
deep:true,
handler(value){
localStorage.setItem('todos',JSON.stringify(value))
}
}
}
}
注意點1：該案例只是把之前Todo-list案例的陣列放到本地快取中儲存
注意點2：handler(value)中因為我們只用到新值，所以只寫一個value即可，省略了oldValue，之前的長這樣handler(newValue, oldValue)
注意點3：預設網站會把todos陣列自動呼叫.toString()方法，會導致本地快取中儲存的值為[Object Object]，所以需要JSON.parse()方法轉換
注意點4：
問題：為啥JSON.parse()最後要拼接個“|| []”？
答案：當todos沒有任何一條記錄時，執行JSON.parse(localStorage.getItem('todos'))其值為null，而下方元件MyFooter.vue會繼續使用todos.length就會導致報錯，所以採用拼接“|| []”，依據是 null || [] 輸出表示式值為 []，即||前方有值就返回該值，如果||前方為null，則整體表示式值為[]
注意點5：
問題：使用watch監聽後，新增和修改按鈕為啥能實現本地快取的新增和刪除？
答案： 因為watch監聽的是整個todos，而handler(value)中的value就代表改變值後的todos，只需要把todos重新設定到本地快取中，就實現了本地快取的更新操作。
注意點6：
問題：為啥watch要開啟深度監聽？
答案：因為預設watch監聽的是淺層次的，即todos儲存的是物件，而使用者在勾選每一項時如果不開啟深度監聽，就會導致使用者每次勾選時並不會修改本地快取中的資料checked狀態，從而使用者重新整理時頁面就變回之前沒勾選的狀態了，所以為了保持監聽資料一致性必須開啟深度監聽。
本人其他相關文章連結
1.《基礎篇第1章：vue2簡介》包含Vue2知識點、個人總結的使用注意點及碰到的問題總結
2.《基礎篇第2章：vue2基礎》包含Vue2知識點、個人總結的使用注意點及碰到的問題總結
3.《進階篇第3章：vue進階-元件》包含元件、自定義事件、插槽、路由等等擴充套件知識點
4.《基礎篇第4章》：使用vue腳手架建立專案
5.vue2知識點：資料代理
6.vue2知識點：事件處理
7.vue2知識點：列表渲染（包含：v-for、key、取值範圍、列表過濾、列表排序、vue監視物件或陣列的資料改變原理、總結vue資料監測）
8.vue2知識點：計算屬性與監聽屬性
9.vue2知識點：生命週期（包含：生命週期介紹、生命週期鉤子、整體流程圖詳解）
10.vue2知識點：非單檔案元件和單檔案元件
11.vue2知識點：元件is屬性
12.vue2知識點：元件模板定義
13.vue2知識點：元件的props屬性、非props屬性、props屬性校驗
14.vue2知識點：元件自定義事件
15.vue2知識點：元件插槽分發
16.vue2知識點：動態元件
17.vue2知識點：混入
18.vue2知識點：瀏覽器本地快取
19.vue2知識點：全域性事件匯流排（GlobalEventBus）
20.vue2知識點：訊息訂閱與釋出
21.vue2知識點：nextTick語法
22.vue2知識點：Vue封裝的過度與動畫
23.vue2知識點：路由
24.vue2知識點：vm呼叫待$命令介紹
25.vue元件通訊案例練習（包含：父子元件通訊及平行元件通訊）
26.vue表單案例練習：vue表單建立一行資料及刪除資料的實現與理解
27.vue2基礎元件通訊案例練習：待辦事項Todo-list案例練習
28.vue2基礎元件通訊案例練習：把案例Todo-list改寫成本地快取
29.vue2基礎元件通訊案例練習：把案例Todo-list改成使用自定義事件
30.vue2基礎元件通訊案例練習：把案例Todo-list改成使用全域性事件匯流排
31.vue2基礎元件通訊案例練習：把案例Todo-list改成使用訊息訂閱與釋出
32.vue2基礎元件通訊案例練習：把案例Todo-list新增編輯按鈕
33.vue2基礎元件通訊案例練習：把案例Todo-list改成使用動畫與過度
34.學習vue2遇到過的問題及個人總結