vue.js学习笔记4--计算属性computed与监视属性watch详情

vue.js学习笔记4–计算属性computed与监视属性watch详情

1. 计算属性

   在computed属性对象中定义计算属性方法，在页面中使用{{方法名}}来显示计算的结果。

   高级性：通过getter/setter实现对属性数据的显示和监视；计算属性存在缓存，多次读取只执行一次getter计算。

   <template>
     <div >
       姓：<input v-model="firstName"/><br>
   	名：<input v-model="lastName"/><br>
   	姓名（单向）：<input v-model="fullName1"/><br>
   	姓名（双向）：<input v-model="fullName2"/><br>	
     </div>
   </template>
   <script>
   export default {
     data(){
   		return{
   			firstName:'small',
   			lastName:'pig',
   		}
   	},
   	computed:{  
   		//什么时候执行：初始化显示/相关的data属性数据发生改变
   		//计算并返回当前属性的值
   		fullName1(){  //计算属性的一个方法，方法的返回值作为属性值
   			return this.firstName+' '+this.lastName
   		},
   		fullName2:{
   			get(){
   				return this.firstName+' '+this.lastName
   			},
   			set(value){  //value就是fullName3的最新属性值
   			  const names=value.split(' ');
   				this.firstName=names[0];
   				this.lastName=names[1]
   			}
   		}
   	}
   }
   </script>
   <style>
   </style>
   
   

   get()：回调函数，当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值。

   set()：回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据。

2. 监视属性

   通过vm对象的$watch()或watch配置来监视指定的属性。当属性变化时，回调函数自动调用，在函数内部进行计算。

   watch:{  //配置监视
   		firstName1:function(value){
   			this.fullName1=value+' '+this.lastName
   		}
   	}
   }
   

   或者对vm：

   vm.$watch('lastName',function(value){
   	this.fullName1=this.firstName+' '+value
   })
   

3. 结果