Vue에서 메소드와 계산의 차이점은 무엇입니까?-JS 튜토리얼-php.cn

Vue에서 메소드와 계산의 차이점은 무엇입니까?

php中世界最好的语言

풀어 주다： 2018-04-12 10:49:36

원래의

1522명이 탐색했습니다.

이번에는 Vue에서 메소드 사용과 계산의 차이점에 대해 말씀드리겠습니다. Vue에서 메소드 사용과 계산 시 노트가 무엇인지 살펴보겠습니다.

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

계산은 계산된 속성이라고 합니다. 이름에서 알 수 있듯이 계산은 계산 결과를 반환해야 합니다. 따라서 많은 논리를 처리해야 하지만 최종 결과를 얻으려면 계산을 사용할 수 있습니다. 메소드와 계산의 차이점을 설명하기 위해 먼저 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>

로그인 후 복사

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

캐싱

에서도 두 가지 방법은 매우 다릅니다. 계산된 속성을 사용하는 것은 reverseMessage는 메시지에 바인딩되어 있으며, ReverseMessage는 페이지에 입장할 때마다 이 메서드를 실행하는 것입니다. , 메소드 메소드를 사용해야 합니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!