数据监听watch和计算属性computed

本文详细解析Vue框架中Watch与Computed属性的区别及应用场景。Watch适用于监听单一数据变化,而Computed用于计算多个依赖数据的复杂场景。通过实例,如简单的计算器和深度监听复杂数据类型,展示了两种属性的使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

watch监听单个,computed监听多个

思考业务场景:

  1. 类似淘宝,当我输入某个人名字时,我想触发某个效果
  2. 利用vue做一个简单的计算器

当watch监听的是复杂数据类型的时候需要做深度监听(写法如下)

watch:{
            msg:{
              handler(val){
               if(val.text=='love'){
                alert(val.text)
               }
              },
              deep:true//开启深度监听
            }
          }

computed 监视对象,写在了函数内部, 凡是函数内部有this.相关属性,改变都会触发当前函数

watch浅监听:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>watch和computed</title>
	<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<div>watch监听数据</div>
        <input type="text" v-model="msg">
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:'#app',
        data(){
        	return {
        		msg:''
        	}
        },
        watch:{
        	msg(newVal,oldVal){
                if(newVal=='hello'){
                	alert('hello');
                }
        	}
        }
	})
</script>
</html>

运行效果图:
在这里插入图片描述
watch深度监听:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>watch和computed</title>
	<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<div>watch监听数据</div>
		<input type="text" v-model="msg.text">
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data(){
            return {
            	msg:{text:''}
            }
		},
		watch:{
			msg:{
				handler(newVal,oldVal){
					if(newVal.text=='deep'){
						alert(newVal.text);
					}
				},
				deep:true  //深度监听
			}
		}
	})
</script>
</html>

运行效果图:
在这里插入图片描述
computed计算属性:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>watch和computed</title>
	<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<div>computed计算属性</div>
		(<input type="text" v-model="n1">+
		<input type="text" v-model="n2">)*
		<input type="text" v-model="n3">={{result}}
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data(){
			return {
				n1:'',
				n2:'',
				n3:''
			}
		},
		computed:{
			result(){
				return (Number(this.n1)+Number(this.n2)) * Number(this.n3)
			}
		}
	})
</script>
</html>

运行效果图:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值