집 >웹 프론트엔드 >JS 튜토리얼 >Vue에서 메소드와 계산의 차이점에 대한 자세한 설명(자세한 튜토리얼)

Vue에서 메소드와 계산의 차이점에 대한 자세한 설명(자세한 튜토리얼)

亚连원래의: 2018-06-01 11:12:461768검색

새로운 Vue의 구성 매개변수에 있는 계산된 메소드와 메소드 모두 많은 양의 논리 코드를 처리할 수 있지만, 어떤 속성을 사용할 때 Vue를 올바르게 사용하려면 신중하게 구별해야 합니다. 이번 글에서는 주로 Vue에서 method와 Computed의 차이점을 소개합니다. 필요하신 분들은 참고하시면 됩니다.

new Vue의 구성 매개변수에 있는 Computed와 Method 모두 많은 양의 로직 코드를 처리할 수 있지만 언제 어떤 속성을 사용해야 할까요? , 주의해야 합니다. 이들을 구별해야만 vue를 올바르게 사용할 수 있습니다.

computed는 계산된 속성이라고 합니다. 이름에서 알 수 있듯이 계산은 계산 결과를 반환해야 합니다. 따라서 많은 논리를 처리해야 하지만 결국 최종 결과를 얻으려면 계산을 사용할 수 있습니다.

method와 계산의 차이점을 설명하기 위해 먼저 Vue 공식 웹사이트에서 계산 속성이 말하는 내용을 살펴보겠습니다. 템플릿의 표현식은 매우 편리하지만 실제로는 간단한 작업에만 사용됩니다. . 템플릿에 너무 많은 논리를 넣으면 템플릿이 과중해지고 유지 관리가 어려워질 수 있습니다.

예를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
//直接在模板中绑定表达式
<p>{{message.split(&#39;&#39;).reverse().join(&#39;&#39;)}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
}
})
</script>
</body>
</html>

위의 경우 템플릿은 더 이상 단순하고 명확하지 않습니다. 이 메시지가 반대 메시지라는 것을 깨닫기 전에 두 번째 확인을 해야 합니다. 템플릿에서 메시지를 여러 번 거꾸로 표시하려고 하면 문제가 더욱 악화됩니다. 이것이 복잡한 논리의 경우 계산된 속성을 사용해야 하는 이유입니다. 아래에서는 비교를 위해 방법과 계산을 사용하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
<p>{{message}}</p>
//直接在模板中绑定表达式
<p>{{message.split(&#39;&#39;).reverse().join(&#39;&#39;)}}</p>
//运用计算属性
<p>{{reverseMessage}}</p>
//运用methods方式
<p>{{methodMessage()}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
},
methods:{
methodMessage:function () {
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
}
})
</script>
</body>
</html>

이 두 가지 방법을 비교했습니다. 반환되는 결과는 동일하지만 계산된 속성을 계산하는 방법에서는 속성을 사용할 때 ()를 추가할 필요가 없는 반면, 메소드 메소드는 메소드처럼 사용해야 하며 ()를 추가해야 합니다. 두 가지 메소드는 캐시에도 매우 다릅니다. reverseMessage는 메시지가 변경될 때만 트리거됩니다. 메소드 메소드는 페이지에 들어갈 때마다 메소드를 실행합니다. 그러나 실시간 정보를 사용하는 경우, 예를 들어 현재 페이지에 진입한 시간을 표시하려면 메소드를 사용해야 합니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

Vue에서 메소드와 계산의 차이점에 대한 자세한 설명(자세한 튜토리얼)

관련 기사