381 vue 之 监听 watch:数据持久化,监听基本数据类型,监听对象,计算属性和watch的区别
1、数据持久化 (本地存储) 1. 可以在数组的`增删改`, 都要保存一下, 比较繁琐 2. 监听数组的变化, 数组一旦发生变化, 在监听里面 保存一下(代码写一遍就可以了) vue 提供了一个监听器. TodoMVC 数据持久化 需求 : 将todoMVC中的数据, 保存到 本地存储 中 (本地持久化) 何时存储数据? 因为功能中的 CRUD 都会修改 list 数据,所以,只要 list 数据发生改变, 就要保存到本地存储中; 方法一 : 在 CRUD 中 分别调用保存数据的方法,(不推荐 太繁琐) 方法二 : 想办法监听 list 数据的改变,只要 list 数据变了, 就调用保存数据的方法 可以使用 vue 的 watch 监听 list 的数据改变 存储值 监听数组和监听对象一样 需要深度监听 保存值, 记得把对象转化为字符串(存的快 省空间) // 监听 watch: { // 监听list todoList: { deep: true, handler(newVal) { // console.log('发生变化了', newVal) // 保存起来 localStorage.setItem('todoList', JSON.stringify(newVal)) } } }, 取值 , 在 data 中可以初始值 记得给一个默认值 空数组 [] const