Vue计算属性和侦听属性

• 计算属性computed

计算属性自动监听依赖值的变化，动态返回内容；在监听的值发生变化时，触发回调函数
1.数据可以逻辑处理
2.对计算属性中的数据进行监视
3.依赖固定数据类型（响应式数据）

计算属性由两部分组成get和set，分别用来获取和设置计算属性；默认只有get，set设置计算属性，修改属性依赖并不直接修改计算属性

computed:{
	fullName:{
		//getter
		get:function(){...return }
		//setter
		set:function(){...数据进行逻辑处理}
	}
}

1.计算属性的属性值必须是一个函数
2.computed可以缓存：主要相关依赖不变，多次访问是之前缓存的计算结果，不会多次执行

• 侦听属性Watch

Vue提供了一种更通用的方式观察和响应Vue实例的数据更新：侦听属性Watch
Watch中可以执行任何逻辑，如：函数节流，Ajax异步获取数据，

<template>
	 <div class="attr">
   		 <h1>watch属性</h1>
    	<h2>{{ $data }}</h2>
    	<button @click="() => (a += 1)">修改a的值</button>
  </div>
</template>
<script>
	export default {
		data(){
		a:1
		b:{c:3,d:5}...
		},
		watch:{
			a:function(val,oldVal){this.b.c+=1}
		}
</script>

1.使用handler回调,输出新对象

2.deep设置为true用于监听对象内部值的变化

3.immediate设置为true：立即以表达式的当前值触发回调

a:{
	handler:function(val,oldVal){
			....
	}
	deep:true    //用于监听e对象内部值的变化
}

应用场景：获取一次列表数据，同时监听input输入，每次发生变化重新获取

created(){
	this.fnc()
}
watch:{
	searchInputValue(){
		this.fnc()
	}
	
}


//-------------------------------优化------------------

watch:{
	searchInputValue(){
		handler:'fnc',  //可以直接使用函数的字面量名称
		immediate: true  //表示创建组件时立马执行一次。
	}
}

Vue计算属性和侦听属性区别

• watch：监听属性值，只要属性值发生变化，其触发回调函数
• computed：监听依赖值，依赖值不变其会直接读取缓存进行复用
• 计算属性不能执行异步任务
• 侦听属性可以执行异步任务，也可检测计算属性