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

01宇宙

已于 2022-08-26 11:29:30 修改

阅读量173

点赞数 1

分类专栏： VUE学习文章标签： vue

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

本文链接：https://blog.csdn.net/csdn570566705/article/details/126538965

版权

VUE学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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>