6.数据监听watch 计算属性 computed

原创已于 2022-08-26 11:29:30 修改 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-08-26 11:24:43 首次发布

VUE学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Vue.js中Watch与Computed特性的不同之处。Watch适用于监听单个或复杂数据变化，而Computed则更适合用于监听多个数据源并进行计算。文章通过实例展示了如何使用这两种特性，并解释了深度监听的概念。

数据的单个监听以及多个监听还有深度监听的不同

watch监听单个，computed监听多个

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

<body>
		<div id='app'>
			<input type="text" v-model='msg.text'>
		</div>
</body>
	
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return {
					//msg:''
					msg:{
						text:''
					}
				}
			},
			watch:{
				// msg(newval,oldval){
				// 	if(newval=='fck'){
				// 		alert('fck')
				// 	}
				// }
				msg:{
					  handler(val){
					   if(val.text=='fck'){
						alert(val.text)
					   }
					  },
					  deep:true//开启深度监听
					}
				  }		
		})
		
	</script>

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


<body>
		<div id='app'>
			<input type="text" v-model='n1'>
			<input type="text" v-model='n2'>
			{{result}}		
		</div>
	</body>
	
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return {
	
					n1:'',
					n2:'',
					n3:''
				}
			},
			computed:{
				result(){
					return Number(this.n1)+Number(this.n2)
				}
			},
		
		})
		
	</script>