【Vue】watch监听器案例，watch监听器实战、用法，watch监听购物车小案例。watch、filters、computed

这里对watch进行了实战案例

首先讲一下应用场景，购物车，当你点击了加入购物车时，购物车的总数需要重新计算，并且购物车的总价，也是需要重新计算的，这里不考虑勾选之类的问题。只对watch做一个简单的应用实战

这里有3个商品，现在对任意一个进行添加或者删除，总价格和总数量都需要发生变化。

定义数组变量

// 首先定义变量
 list: [
        {
          id: 1,
          name: "草莓啵啵",
          price: 10,
          num: 0,
        },
        {
          id: 2,
          name: "草莓圣代",
          price: 15,
          num: 2,
        },
        {
          id: 3,
          name: "棒打鲜橙",
          price: 5,
          num: 1,
        },
      ],
      totalNum: 0,  // 总数量
      totalPrice: 0, // 总价格

这里的变量是定义在data数据中的

渲染页面数据

<div v-for="(item, index) in list" :key="item.id" class="box">
  <button @click="add(index)">+</button>
    <div>
        商品:{{ item.name }} , 价格:{{ item.price }} ,数量:{{ item.num }}
    </div>
    <button @click="del(index)">-</button>
    </div>
   总价格:{{ totalPrice }}
   <br />
 数量{{ totalNum }}
</div>

再写一下css

.box {
  width: 300px;
  display: flex;
  justify-content: space-between;
  margin: 20px 10px;
}

添加和删除的方法比较简单，就是直接对数组中的数据进行修改，但是实际肯定不是的，这里写简单点就好了
开✍

methods: {
    add(index) {
      this.list[index].num += 1;
    },
    del(index) {
      this.list[index].num -= 1;
    },
  },

watch监听

最后添加和删除写好了，就是对页面中的totalNum和totalPrice进行实时监听数据了。

// 写watch监听
  watch: {
    // 要监听的数据，可以是数组、对象、或者普通的变量
    list: {
      immediate: true, // 立即执行,创建页面时就执行一次
      deep: true, // 深度监听,会监听到对象里面的属性改变
      handler(newList) {
        //newList是改变后的新数组
        this.totalPrice = 0;
        this.totalNum = 0;
        newList.forEach((child) => {
          // 将总数重新计算
          this.totalNum += child.num;
          // 总价格也要重新计算
          this.totalPrice += child.num * child.price;
        });
      },
    },
  }, 

看到没有，watch监听
首先写监听的数据名，我定义的数组就叫list，我就写list

总结

watch监听器，没有返回值，是一对多：监听一个，对多个进行修改，无return返回值 👉watch监听器👈

computed，计算属性：将data中的数据进行计算，返回出一个新的变量名，它是多对一，因为可以拿多个数据进行计算，但是最后只返回一个！不可与data重复 👉 computed实战案例

filters，过滤器，可以将渲染在页面上的数据进行分割、转换等过滤器操作。👉filter实战案例

个人理解，如果有不对，请评论区指出纠正。