【Vue.js】computed와 methods의 차이
소개
일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 제대로 기억하지 않으면 우선 그런 것을 비망록으로 1개 1개 남겨 둔다.
computed와 methods의 차이
외형의 거동은 같지만, 움직임에는 큰 차이가 있기 때문에 제대로 구분하지 않으면 안되는 것이
computed 와 methods각각에 대해 정리하면 이하의 표와 같이 된다.있어야 한다면 관계가 있는 부분이 갱신될 때만 변경되어야 하기 때문에
computed 를 사용하는 것이 정답.#
설명
실행 타이밍
computed
동적 속성을 정의할 수 있는 속성입니다. 속성이므로 반드시 return이 필요.
종속성(참조 대상 값)이 업데이트될 때만 실행.
method
메서드를 정의할 수 있는 속성입니다.
DOM이 다시 그려질 때마다 실행.
아래의 동영상과 같이
console.log()를 내면 그 차이를 잘 알 수 있다.
동영상의 소스 코드는 이하.
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{ counter }}</p>
<button @click="counter += 1">+1</button>
<p>{{ anotherCounter }}</p>
<button @click="anotherCounter += 1">他の+1</button>
<p>{{ lessThanThreeComputed }}</p>
<p>{{ lessThanThreeMethod() }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
counter: 0,
anotherCounter: 0
},
computed: {
lessThanThreeComputed: function () {
console.log('computed');
return this.counter > 3 ? '3より上' : '3以下';
}
},
methods: {
lessThanThreeMethod: function () {
console.log('methods');
return this.counter > 3 ? '3より上' : '3以下';
}
}
})
</script>
</body>
</html>
※덧붙여서
dataプロパティ 는 동적인 것은 표현할 수 없고 초기값을 정의하는 만큼 사용되므로 이하와 같은 일은 할 수 없다data-prop.js
new Vue({
el: '#app',
data: {
counter: 0
// lessThanThree: this.counter <-できない
// lessThanThree: counter > 3 ? '3より上' : '3以下' <-できない
}
})
Vue.js 공부 메모 목록 기사 링크
Vue.js에 대해 공부했을 때 작성한 공부 메모 기사 링크를 집계 한 기사.
Reference
이 문제에 관하여(【Vue.js】computed와 methods의 차이), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yuta-katayama-23/items/cb1ba764d3ceddb64f9c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
