《风尚坐火箭学习vue》-- 第十章：Vue中的监听watch用法及商品总价实例

本文链接：https://blog.csdn.net/zsx0806/article/details/121545660

前言：前端框架千千万，独有vue占一半

我是风尚，让我们一起坐火箭去学习Vue

《风尚坐火箭学习vue》-- 第十章：Vue中的监听watch用法及商品总价实例

上章回顾：“风尚，看懂听懂了吗？有啥不懂的记得问我！”老头说...

“啊这，还行，能看懂。继续继续。”风尚说。

“那好，再讲一个Vue中的监听watch语法吃饭。好好听，有点难啊”老头说。

Vue 通过 watch 来响应数据的变化。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<div id="app">
    <p>计数器: {{ num }}</p>
    <button @click="num++">点我</button>
</div>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        num: 1
    },
    watch:{
      'num': function(nval, oval) {
        console.log('num变化 :' + oval + ' 变为 ' + nval + '!');
      },     
    }
});
 
</script>

这个案例代码可以实现：

每次点击按钮都会输出：

num变化 :1变为2!

num变化 :2变为3!

...以此类推

对象变化监听

我们需要监听对象的属性值是否发生改变用：

<div id="app">
<p>计数器: {{ num }}</p>
<button @click="num.age++">点我</button>
</div>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        num: {age:1}
    },
    watch:{
      'num':{
        handler:function(nval, oval) {
          console.log('num变化 :' + oval.age + ' 变为 ' + nval.age + '!')
          },
        deep:true     //深度观察：deep:true，
        }
    }
});
</script>

在控制台就可以看见监听的状态

在这里特别注意：深度观察：deep:true，它会一层层遍历，给这个对象的所有属性都加上这个监听器。但是这样性能开销会比较大，修改任何一个属性，都会出发这个监听器里的handler.

闲话不多说，给你安排

Vue中的监听watch用法及商品总价实例

实例效果图：

开搞了风尚，注意听讲：

先引入JS；

整个table表格然后看我的代码注释：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- 整个表格 -->
			<table>
				<!-- 整个标题 -->
				<tr>
					<th>id</th>
					<th>书籍名称</th>
					<th>出版日期</th>
					<th>购买价格</th>
					<th>数量</th>
					<th>操作</th>
				</tr>
				<!-- 换行 -->
				<!-- v-for从list遍历 -->
				<tr v-for="(item,index) in list" :key="index">
					<!-- ID -->
					<td>{{index +1}}</td>
					<!-- 书籍名 -->
					<td>{{item.name}}</td>
					<!-- 日期 -->
					<td>{{item.data}}</td>
					<!-- 价格 -->
					<td>${{item.price}}</td>
					<td>
						<!-- 点击减 -->
						<button @click="jian(item)">-</button> 
						<!-- list里的num -->
						{{item.num}}
						<!-- 点击加 -->
						 <button @click="jia(item)">+</button>
					</td>
					<td>
						<button @click="del(index)">移除</button>
					</td>
				</tr>
			</table>
			<p>总价格：{{sum}}</p>
		</div>
		
		<script>
			new Vue({
				el:"#box",
				methods:{
					// 减
					jian(item){
						item.num-=1;
						if(item.num<0){item.num=0};
					},
					// 加
					jia(item){
						item.num+=1;
						if(item.num>10){item.num=10};
					},
					// 删除
					del(index){
						this.list.splice(index,1);
					}
				},
				data(){
					return{
						// 数组
						list:[
							{name:"js风尚不会",data:"1999",num:0,price:"10"},
							{name:"vue风尚不会",data:"2000",num:0,price:"20"},
							{name:"angular风尚不会",data:"2001",num:0,price:"30"},
							{name:"react风尚不会",data:"2002",num:0,price:"40"},
							{name:"jquery风尚不会",data:"2003",num:0,price:"50"},
						],
						// 总价初始值
						sum:0,
					}
				},
				// watch监听方法
				watch:{
					// 监听list变化
					"list":{
						handler(nval){
							// 设置监听初始值
							var count=0;
							// filter过滤
							this.list.filter(item=>{
								// 监听+=数量*价格
								count+=item.num*item.price;
							});
							// 总价
							this.sum=count;	
						},
						deep:true,
					}
				}	
			})
		</script>
	</body>
</html>

“风尚，看懂听懂了吗？有啥不懂的记得问我！”老头说.

“这这这，让我多看会！”风尚有点蒙的说。。。