数据监听watch和计算属性computed

最新推荐文章于 2025-06-15 20:33:00 发布

Mr.ZKH

最新推荐文章于 2025-06-15 20:33:00 发布

阅读量276

点赞数

CC 4.0 BY-SA版权

分类专栏： Vuejs

本文链接：https://blog.youkuaiyun.com/weixin_44415461/article/details/97775094

Vuejs 专栏收录该内容

41 篇文章

订阅专栏

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

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

watch监听单个，computed监听多个

思考业务场景：

类似淘宝，当我输入某个人名字时，我想触发某个效果
利用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>

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