侦听综合运用

购物车

使用侦听处理业务

.引入监听包 watch

.取消结构中的事件绑定

.注释或移除之前的事件处理函数：全选 selAll 和部分选 selItem

let flag = true

.使用函数返回购物车数据 cartData 中的全选 selectedAll

.只有 flag 为真时，才真正置空购物车数据；利用 flag 保留选中的部分数据

watch(() => cartData.selectedAll, (newVal) => {
  if (newVal) {
    cartData.selectedLists = [...cartData.lists]
  } else {
    if (flag) cartData.selectedLists = []
  }
})

.如果选中列表长度和商品列表长度相等，则全选为真，同时置 flag 为真；否则全为假

watch(() => cartData.selectedLists, (newVal) => {
  if (newVal.length == cartData.lists.length && cartData.lists.length) {
    cartData.selectedAll = true
    flag = true
  } else {
    cartData.selectedAll = false
    flag = false
  }
})

.深度侦听：数量是对象的一个属性

.立即侦听：页面渲染完毕也应该结算异常

.重新声明一个 ref 数据 sum 为结算总价，替换结构中的计算属性 getTotal

let sum = ref(0)

.改写商品选中列表的侦听如下

watch(() => cartData.selectedLists, (newVal) => {
  if (newVal.length == cartData.lists.length && cartData.lists.length) {
    cartData.selectedAll = true
    flag = true
  } else {
    cartData.selectedAll = false
    flag = false
  }
  sum.value = cartData.selectedLists.reduce((sum, item) => {
    return sum + item.quantity * item.price
  }, 0).toFixed(2)
}, { deep: true, immediate: true })        

现场验收、课后提交实验报告