【笔记】vue课堂小作业之书购物车列表的增删改查小记
1. reduce 函数的基本用法
array.reduce((accumulator, currentValue) => { ... }, initialValue);
accumulator: 累积器，表示当前累积的值，通常在第一次时为initialValue。（总数sum）currentValue: 当前数组正在遍历的元素。（遍历元素item）initialValue:reduce的初始值，在第一次迭代时作为accumulator的初始值。（一般为0）
在你的代码中：
sum是累积器，表示当前累积的书的数量。item是当前数组的元素，表示每一本书。0是reduce的初始值，即累积器sum初始为 0。
代码例子
学习时的疑问
为什么不能调换 sum 和 item？
不能调换 sum 和 item 的位置。因为 reduce 的设计是将累积的值作为第一个参数，当前元素作为第二个参数。如果调换了两者位置，函数的逻辑就会出错，无法正确累加。
为什么括号后面要跟一个 0？
0 是 reduce 的初始值，表示累积器 sum 的初始值。如果你不设置初始值，reduce 会将数组的第一个元素作为初始值，第二个元素作为第一个遍历的 currentValue。在你的例子中，累加的是数量（num），所以初始值 0 是合理的，因为它表示还没有累积任何数量。
2. 页面购物车数据本地化
depp:true（深度监视）的基本用法
watch 是 Vue.js 提供的一个侦听属性变化的机制，它允许你监听某个数据属性的变化，并在变化时执行相应的代码。它特别适用于需要在数据变化时进行异步操作或处理副作用的场景，比如更新 localStorage。
deep: true: 这是一个选项，表示进行深度监听。当你监听的属性是一个对象或数组时，Vue 默认只监听该对象或数组的引用，而不会监听它内部的深层变化。如果你希望监听对象内部的属性变化，就需要使用 deep: true。在这种情况下，bookList 是一个数组，因此启用深度监听意味着数组中的元素（比如每本书）发生变化时，也会触发 watch。
代码例子：
-
bookList: 这是你要监听的数据属性。在 Vue 的实例中，bookList可能是你的一个状态属性，包含了多个书籍的列表信息。 -
handler(newValue): 这是回调函数，newValue是bookList发生变化后的新值。每当bookList或其内部内容发生变化时（无论是添加、删除书籍，还是修改其中某个书的属性），都会调用这个handler函数。
localStorage.setItem
在 handler 函数中，调用了 localStorage.setItem('bookList', JSON.stringify(this.bookList))，其作用是将当前的 bookList 保存到浏览器的 localStorage 中。
-
localStorage.setItem：这是浏览器的localStorageAPI，用来存储数据。它的第一个参数是存储项的键名'bookList'，第二个参数是存储的值，这里通过JSON.stringify把bookList转换成了字符串格式。 -
this.bookList：指向当前 Vue 实例中的bookList，这个bookList是 JSON.stringify 之后被存储到localStorage的。