vue学习笔记【三、计算属性与监听】

1、set、get方法实现计算属性与普通属性之间的数据双向绑定

<template>
	<div>
		<input type="text" placeholder="姓" v-model="first"/><p></p>
		<input type="text" placeholder="名" v-model="last"/>
		<p>====================================================</p>
		
		<!--单向-->
		<input type="text" placeholder="姓名" v-model="fullname1"/><br /><br />
		
		<!--双向-->
		<input type="text" placeholder="姓名" v-model="fullname2"/>
	</div>
</template>

<script>
	export default{
		name:"ComputedAndWatch",
		data(){
			return {
				first:'',
				last:''
			}
		},
		computed:{
			//计算属性与普通属性之间的单向绑定
			fullname1: {
				get(){
					return this.first+'·'+this.last
				}
			},
			
			//计算属性与普通属性之间的双向绑定
			fullname2: {
				get(){
					console.log('调用了get');
					return this.first+'·'+this.last
				},
				
				set(value){
					console.log('调用了set,值：',value);
					//更新first与last值
					let name = value.split('·');
					//console.log(name);
					this.first = name[0];
					this.last = name[1];
				}
			}
		}
	}
</script>

<style scoped>
	
</style>

2、侦听器watch，当监听属性变化时，回调函数自动调用，在函数内部进行计算。

//watch
watch:{
	//监听first
	first(value){
		console.log('first发生变化',value);
		//更新first
		this.full = value+'·'+this.last;
	},
	//监听last
	last(value){
		console.log('last发生变化',value);
		this.full = this.first+'·'+value;
	}
}

总结：

• 能使用computed的地方尽量使用computed
• computed计算一个新的属性，并将该属性挂载到vue实例上。watch监听已经存在并已经挂载到vue上的数据。所以watch可以监听到computed计算属性的变化。
• computed适用于一个数据被多个数据影响的情况，watch适用于一个数据影响多个数据的情况。
• computed具有缓存性，只有当依赖变化后，第一次访问computed属性，才计算新的值。watch是当数据发生变化就会调用执行函数。