Vue.js 계산 속성 계산 및 감시(5)-JS 튜토리얼-php.cn

Vue.js 계산 속성 계산 및 감시(5)

黄舟

풀어 주다： 2016-12-13 16:33:44

원래의

1142명이 탐색했습니다.

템플릿의 표현식 바인딩은 매우 편리하지만 실제로는 간단한 작업에만 사용됩니다. 템플릿은 뷰의 구조를 설명하는 데 사용됩니다. 템플릿에 논리를 너무 많이 넣으면 템플릿이 과중해지고 유지 관리가 어려워질 수 있습니다. 그렇기 때문에 Vue.js는 바인딩 표현식을 하나의 표현식으로 제한합니다. 둘 이상의 표현식 논리가 필요한 경우 **계산된 속성**을 사용해야 합니다.

Vue 인스턴스의 계산된 속성

<div class="test">    
<p>原始的信息{{message}}</p>   
<p>计算后的信息{{ComputedMessage}}</p>  
</div>

로그인 후 복사

js 코드

var myVue = new Vue({    
el: ".test",    
data: {      
message:12    
},    
computed:{      
ComputedMessage:function () {        
return this.message+10;      
}   
}  
});

로그인 후 복사

인터페이스에 12와 22가 표시됩니다.

위 방법은 하나입니다. 버퍼링 구현의 효과는 버퍼링에 따라 달라집니다. 계산된 속성은 관련 종속성(메시지)이 변경될 때만 다시 평가됩니다. 즉, 메시지가 변경되지 않는 한 ComputedMessage에 여러 번 액세스해도 이 속성이 다시 계산되지 않습니다. .

계산된 ComputedMessage 속성은 항상 메시지에 따라 달라집니다.

함수

<div class="test">    
<p>原始的信息{{message}}</p>    
<p>计算后的信息{{MessageFunction()}}</p>  
</div>

로그인 후 복사

js 코드

var myVue = new Vue({    
el: ".test",    
data: {      
message:12    
},    
methods:{      
MessageFunction:function () {        
return this.message+10;      
}   
}  
});

로그인 후 복사

를 호출해도 동일한 효과를 얻을 수 있습니다. 결과는 위와 동일하지만 다시 렌더링될 때마다 다시 호출됩니다.
그래서 위의 두 가지 방법을 사용할 때에는 캐싱을 사용해야 하는지 먼저 판단해야 합니다

vue 인스턴스의 watch를 사용하세요

이게 이해가 안가네요
그런데 계산된 속성을 더 편리하고 빠르게 사용하세요

<div class="test">   
<p>原始的信息{{fullName}}</p> 
</div>

로그인 후 복사

js 코드

var myVue = new Vue({   
el: ".test",   
data: {     
firstName:"fur",     
lastName:"bool"  
},   
computed:{     
fullName:function () {       
return this.firstName+this.lastName     
}   
} 
});

로그인 후 복사

그리고 계산된 속성 setter와 getter를 기본으로 설정할 수 있습니다.

set 및 get 호출 프로세스를 보여줍니다

<div class="test">   
<p>原始的信息{{fullName}}</p>   
<button @click="fu">test</button> 
</div>

로그인 후 복사

js 코드

var myVue = new Vue({    
el: ".test",    
data: {      
firstName:"fur",      
lastName:"bool",      
fullName:"sasas dsdsd dsds"   
},    
computed:{      
fullName:{        
get:function () {          
console.log("get")          
return this.firstName+this.lastName        
},        
set:function(value){          
var names=value.split(" ");          
this.firstName=names[0];          
this.lastName=names[names.length-1];          
console.log("set");        
}     
 }    
 },    
 methods:{      
 fu:function () {        
 myVue.fullName="sasas dsdsd dsds";        
 console.log(myVue.firstName);   //sasas        
 console.log(myVue.lastName);  //dsds      
 }    
 } 
  });

로그인 후 복사

Get이 먼저 출력됩니다.

fullName에 값을 할당하기 위해 버튼을 클릭할 때 먼저 set을 호출한 다음 get 메소드를 호출합니다.

사용자 정의 Watcher

계산된 속성은 대부분의 경우 매우 적합하지만 때로는 Watcher를 사용자 정의해야 하는 경우도 있습니다. 데이터 변경에 대응하고 싶을 때 비동기 작업 및 기타 작업을 수행하는 것이 매우 유용하기 때문입니다

위는 Vue.js 계산 속성이며 자세한 내용은 PHP를 참조하세요. 중국사이트 (m.sbmmt.com)!