Vue的计算属性和侦听器Watch

一、计算属性

1、什么是计算属性?

<div>
	{{message.split('').reverse().join('')}}
</div>

模板设计的初衷是用于简单计算的,在模板内放太多的逻辑会让模板难以维护,对于任何复杂的逻辑都可以使用计算属性
对于上述例子使用计算属性来处理

<div id="app">
	<p>{{message}}</p>
	<p>reversedMessage</p>
</div>
<script>
	var vm = new Vue({
		el:"#app",
		data:{
			message:''
		},
		computed:{
			reversedMessage:function(){
			return this.message.split('').reverse().join('')
			}
		}
	})
</script>

2、计算属性的缓存

我们可以将同一个函数定义为一个方法,也可以将其定义为一个计算属性,但是计算属性是基于它的响应式依赖进行缓存的,只有在响应式依赖发生改变时计算属性才会重新求值,只要message没有发生改变,多次访问计算属性reservedMessage时会立即返回之前的计算结果,不会重新执行计算属性。

3、get函数什么时候会执行?

  1. 初次读取时会执行一次
  2. 当依赖的数据发送改变时

4、计算属性如何传参数?

full(){
	return (value)=> {
	return value+this.fist+this.last
	}
}

二、侦听器watch

1、监听data中的数据

只要data中的数据发生改变,就会执行相应的逻辑。

<script>
     var vm = new Vue({
       el: '#app',
       data: {
         firstName: '',
         lastName: '',
         fullName: ''
       },
       watch: {
         firstName(newVal, oldVal) {
           console.log(newVal, oldVal)
           this.fullName = newVal + this.lastName
         }, 
         lastName(newVal, oldVal) {
             this.fullName = this.firstName + newVal
         }
       }
     })
   </script>

2、深度监听

data(){
	return {
		number:{
			a:1,
			b:2
		}
	}
}

监听多级结构中某个属性的变化

'number.a':{
	handler:function(newVal,oldVal){
		console.log(newVal)
	},
}

监听多级结构中所有属性的变化

number:{
	handler:function(newVal,oldVal){
		console.log(newVal,oldVal)
	},
	deep:true
}

3、watch监听路由的变化


watch: {
	'$route.path': function (newVal, oldVal) {
		 if (newVal === '/login') {
		 	console.log('欢迎进入登录页面');
		 }
	}
}
  watch:{
  	//to是将要进入的路由,from是当前页面的路由
    '$route' (to, from) {
      if(to.path == "/xxx"){
        //操作
      }
    }
  },

4、watch监听的属性

immediate
watch监听在第一次绑定的时候不会监听函数,只有值发送改变时才会执行,如果需要在最初绑定值的时候就进行监听,则使用immediate属性
handler
需要具体执行的方法,监听数组或对象的属性时用到的方法。
deep
如果监听一个对象的改变时,普通的watch无法监听对象内部属性的改变,此时需要deep属性对对象进行深度监听。

  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

锦鲤儿

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值