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

监听器案例，watch监听器实战、用法，watch监听购物车小案例。watch、filters、computed"/>

【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实战案例

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