修改成为购物车 有全选和反选选项 总价

这个代码片段已经包含了将商品列表转换成购物车的基本结构，用户可以勾选商品进行添加。为了添加全选和总价功能，我们可以进行如下的调整：

1. **全选/反选**：在商品列表上方添加一个全选按钮，初始状态为禁用。当所有商品都勾选时，全选按钮变为激活状态；如果有一个或多个商品未选择，则全选按钮禁用。点击全选按钮时，遍历`goodslist`，对所有商品设置相同的勾选状态。

<label class="toggle">
  <input type="checkbox" :checked="selectAll" @change="toggleAll" />
  全选
</label>

const selectAll = ref(false);
...
methods: {
  toggleAll() {
    goodslist.forEach(item => item.checked = selectAll.value);
    if (goodslist.every(item => item.checked)) {
      this.selectAll.value = true;
    } else {
      this.selectAll.value = false;
    }
  },
  // ...其他方法
},

2. **总价计算**：在Vue组件的data里定义一个变量`totalPrice`，初始化为0。每当商品勾选或取消勾选时，根据勾选的商品总价进行累加或减去。

data() {
  return {
    totalPrice: 0,
    // ...其他数据
  };
},
methods: {
  updateTotalPrice() {
    this.totalPrice = goodslist.reduce((sum, item) => sum + (item.checked ? item.price : 0), 0);
  },
  // ...其他方法
},
watch: {
  $set(goodslist, newGoodsList) { // 观察列表的变化
    this.updateTotalPrice();
  },
  selectAll(value) {
    goodslist.forEach(item => item.checked = value); // 当全选变化时更新所有商品
    this.updateTotalPrice();
  }
},

现在，每次商品勾选或全选操作后，总价都会实时更新。相关问题：
1. 怎么样实现全选功能？
2. 怎么计算购物车的总价？
3. 总价如何随着商品的选择而动态改变？