计算属性和监听器

计算属性和监听器

一般情况下都是放到 data 中的，但是有些属性可能需要经过一些逻辑计算后才能得出来，那么我们可以把这类属性变成计算属性，比如：

<div id="app">        
	<label>长：</label>        
	<!-- v-model 双向绑定 -->        <input type="number" name="length" v-model:value="length">        
	<label>宽：</label>        
	<input type="number" name=" width" v-model:value=" width">        
	<label>面积：</label>        
	<!-- readonly 只读 -->        
	<input type="number" readonly v-bind:value="area">
    </div>
<script>    
	new Vue({        
		el: "#app",        
		data:{            
			length:0,            
			width:0        
			},        
		// 计算属性        
		computed:{            area:function(){                
			console.log(this.length, this.width)                
			return this.length * this.width            
			}        
		}   
})</script>    

计算属性更加只能，它是基于她们得响应式依赖进行缓存得，也就是说只要相关依赖（比如上例的 area）没有发生变化，那么这个计算属性的函数不会重新执行，而是直接返回之前的值。这个缓存功能让计算属性访问更加高效。

计算属性的 set

计算属性默认只有get，不过在需要时你也可以提供一个set，但是提供了set 就必须提供get方法。例子：

 <div>            
 <label>省：</label>            
 <input type="text" v-model:value="province">        
 </div>        
 <div>            
 <label>市：</label>            
 <input type="text" v-model:value="city">        
 </div>        
 <div>            
 <label>区：</label>            
 <input type="text" v-model:value="area">        
 </div>        
 <div>            
 <label>详细地址：</label>            
 <input type="text" v-model:value="addr">        
 </div>

 new Vue({        
	 el: "#app",        
 	data:{            
 		province: "",           
 		 city: "",            
 		 area: ""
       	 },
	
	addr:{            
		get:function(){                
		 	var result = ""                
		 	if(this.province){                    
		 		result = this.province + "省"                
		 		}                
		 	if(this.city){                    result += this.city + "市"                
		 		}               
		 	if(this.area){                    result += this.area + "区"                
		 		}                
		 	return result            
		 	},            
		set:function(value){                
		 			
		     console.log(value)                
		 			
                      var result = value.split(/省|市|区/)                
                      console.log(result)                
                      if(result && result.length > 0){                    
                      	 this.province = result[0]                
                      	 }                
                      if(result && result.length > 1){                    
                          this.city = result[1]               
                           }                
                      if(result && result.length > 2){                    
                         this.area = result[2]                
                 }            
              }

监听器

监听属性可以针对某个属性进行监听，只要这个属性的值发生改变，那么就会执行相应的函数。

<div>
	<label>搜索：</label>        
	<input type="text" v-model:value="keyword">        
	<p>结果：</p>        
	{{answer}}
</div>

<script>    
	new Vue({       
	     el: "#app",       
	     data:{
	      keyword:"",            
	      answer:""
        },
        watch:{            
           keyword: function(newvalue,oldvalue){                
                         console.log(newvalue)                
                         console.log(oldvalue)                
                         this.answer= "加载中。。。。"                
                         // 定时器 时间前也可加Math.random()-->随机                
                         setTimeout(() => {                   
                          this.answer = "搜索结果：" +newvalue                
                          }, Math.random()*1000);           
            }        
         }    
    })
 </script>