VUE数据存储和深度监视（练习）

看起来有点儿弄不明白？？？的技术
1.深度监视：为了发现对象内部的变化，可以在选项参数中指定deep:true，而监听数组的变动不需要这么做。
方法使用：
1）deep:其值是true或false，确认是否是深入监听。一般监听是不能监听到对象属性值的变化的，但是数组值是可以监听到的。
2）handler：其值是一个回调函数，监听到变化时应该执行的函数。
3）immediate：true或false，确认是否以当前的初始值执行handler函数（是否立即执行函数的意思？）。
接上前面未完成的VUE-TODULIST的代码，之后做一个存储，首先复制一个lk-todo项目，重命名为lk-todo1，在lk-todo中新建文件夹utils并且新建文件 localStorageUtil.js

//localStorageUtil.js文件里的内容
const LK_TODO = 'lk-todo1';
export default {
    readTodos(){
        return JSON.parse(localStorage.getItem(LK_TODO) || '[]')
    },
    saveTodos(todos){
        localStorage.setItem(LK_TODO,JSON.stringify(todos));
    }
}

在App.vue中添加数据和深度监视

data(){
   return{
      todos:localStorageUtil.readTodos()
   }
},

//深度监视
watch:{
   todos:{
       handler:localStorageUtil.saveTodos,
       deep:true,
       immediate:true
      }
}