집 > 기사 > 웹 프론트엔드 > Vue에서 메소드와 계산의 차이점

Vue에서 메소드와 계산의 차이점

php中世界最好的语言원래의: 2018-03-28 11:48:451389검색

이번에는 Vue에서 Method와 Computed의 차이점을 알려드리겠습니다. Vue에서 Method와 Computed를 사용할 때 주의사항은 무엇인가요?

새 Vue의 구성 매개변수에 있는 계산된 메소드와 메소드 모두 많은 양의 논리 코드를 처리할 수 있지만, 어떤 속성을 사용할 때 Vue를 올바르게 사용하려면 신중하게 구별해야 합니다.

computed는 이름에서 알 수 있듯이 계산 결과를 반환해야 합니다. 따라서 많은 논리를 처리해야 하지만 최종적으로 최종 결과를 얻으려면 계산된

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

예를 살펴보겠습니다.

<!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('').reverse().join('')}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
}
})
</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('').reverse().join('')}}</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('').reverse().join('');
}
},
methods:{
methodMessage:function () {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>

이 두 가지 방법을 비교했습니다. 반환되는 결과는 동일하지만 계산된 속성을 계산하는 방법에서는 속성을 사용할 때 ()를 추가할 필요가 없는 반면, 메소드 메소드는 메소드처럼 사용해야 하며 ()를 추가해야 합니다.

Cache

에 있는 두 가지 메소드도 매우 다릅니다. reverseMessage는 메시지가 변경될 때만 트리거됩니다. 메소드 메소드는 페이지에 들어갈 때마다 메소드를 실행합니다. 단, 실시간을 이용할 경우에는 현재 페이지에 진입한 시간을 표시하는 등의 정보를 표시할 때에는 반드시 방법을 사용해야 한다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!