Methods 설명
methods는 이벤트가 발생하거나 데이터를 바인딩할 때 유용하게 사용합니다.
예를들어 위의 버튼을 누르고 Result에 값이 10이 증가하고 5가 마이너스 되는 특정 이벤트를 발생시키고 싶을 때(이벤트 바인딩, 데이터 바인딩)을 하고 싶을 때 사용할 수 있습니다. html과 vue 코드는 다음과 같습니다.
<h2>Events in Action</h2>
<button v-on:click="add(10)">Add 10</button>
<button v-on:click="reduce(5)">Subtract 5</button>
<p>Result: {{ counter }}</p>v-on:click는 뷰에서 제공하는 속성입니다. 이를 통해 버튼 id를 찾아서 속성을 가져오고 value를 찾아서 값을 삽입하는 자바스크립트의 번거로움을 줄여주죠.
메서드는 add(10), reduce(5) 각각 정의되어 있습니다.
data(){
return {
counter: 0
};
},
methods: {
add(num) {
this.counter++;
},
reduce(num) {
this.counter--;
}Computed 설명
computed는 data()에 정의된 값을 재사용하거나 변형하고 싶을 때 유용하게 사용됩니다.
methods로 사용할 수 있겠지만 dom의 특정부분이 변경될 때마다 다시 실행되는 성능이슈가 발생할 수 있기 때문에 데이터를 재사용할 땐 computed를 사용하는게 좋습니다.
첫번째 칸에는 firstname, 두번째 칸에는 lastname을 입력받고, 둘 다 칸이 채워졌을 때만 이름을 출력합니다.
<input type="text" v-model="name">
<input type="text" v-model="last_name">
<button v-on:click="reset">Reset</button>
<p>Your Name: {{ fullname }}</p>v-model은 사용자가 입력하는 데이터의 입력과 저장을 동시에 진행합니다.
예를들어 data 속성에 name은 vue에서 공통으로 사용하는 데이터인데 여기 name 데이터의 값을 변경 시키고, 입력까지 받습니다.
사실 입력을 받으려면 v-input을 사용해야하고, 데이터 값을 변경시키려면 v-bind:vlaue를 사용해야합니다.
이것을 편하게 합친게 v-model이죠.
따라서 v-model을 통해 실시간으로 사용자가 입력한 값을 뷰가 name, last_name을 감지하고 저장합니다.
{{ }} 문법을 보간법이라고 하는데 computed에서 정의한 fullname() 의 리턴값을 실시간으로 사용자에게 보여줍니다.
data() {
return {
counter: 0,
name: '',
last_name: '',
};
},
computed: {
fullname(){
if (this.name === '' || this.last_name === ''){
return '';
}else{
return this.name + " " + this.last_name;
}
}
},computed 속성은 데이터를 캐싱하여 값이 변하지 않으면 다시 계산하지 않습니다.
name과 last_name이 변할 때만 다시 계산되어 사용자에게 보여줍니다.
위처럼 data()에 정의된 값을 재사용하거나 변형할 때 유용하게 사용됩니다.
Watch 설명
다시 이 사진으로 돌아와서 만약에 Result가 50이 넘어가면 2초후 0으로 초기화 시키고 싶을 때 즉
특정 조건이 됐을 때 트리거를 발동하고 싶다면 watch를 사용합니다.
watch는 감시자라고 불리는데 특정 데이터를 계속 감시합니다.
html은 동일하고, methods도 똑같이 사용되고 있습니다. 여기에 50이 넘어가면 2초후에 0으로 바꿔라 라는 트리거를 추가합니다.
watch:{
counter(value){
if(value > 50){
const that = this;
setTimeout(function(){
that.counter = 0;
},2000);
}
}
},counter 라는 데이터를 감시하고 50보다 counter가 커진다면 counter를 0으로 되돌려 놓습니다.
각각의 차이점과 사용 예시
methods : 사용자 이벤트에 대한 처리, 데이터를 바인딩할 때의 처리, 반응형으로 코드의 실행을 원할 때
(다만 사용자가 입력한 데이터를 변화할 때마다 출력하는 그런 실시간 데이터를 반영하는? 함수를 methods로 작성하게 되면 데이터가 사용자에게 보여질 때마다 dom은 새로고침 되는데 그때 마다 method가 재실행되어 성능상 문제가 생길 수 있음)
computed : 그래서 실시간 연산, 실시간 데이터 반영을 할 때 사용하는 것이 바로 computed, 사용자의 입력값에 따라 성과 이름이 달라지는데 이를 반영하기 위해 computed 사용
watch : 데이터를 감시하고 특정 조건이 됐을 때 실행 되게 함. 예를들어 사용자가 입력한 검색어를 감시하고, 데이터가 변경될 때마다 서버에 요청을 보내어 관련 검색어를 불러올 수 있음.
