Vue 이벤트 처리 및 기본 속성

기본적으로 v-on은 @로 대체하여 사용할 수 있다.

@click

@click이란 클릭하는 것을 감지하고 함수를 실행하는 것을 의미한다

<template>
<div>
  <button type="button" @click="increaseCounter">Add 1</button> 
  <p>The count is : {{counter}}</p>
</div>
</template>

data() {
    return {
     counter: 0,
    };
},
methods: {
    increaseCounter() {
      this.counter = this.counter + 1; // data에 정의된 변수(counter)는 this를 통해 접근할 수 있음
    },
}

출력결과 : button 클릭시 마다 counter가 1씩 증가함

참고: 함수 두개를 동시에 동작하기 위해서는 @click="one(), two()" 와 같은 방식으로 작성할 수 있다.

@change

@click과 비슷하게 보일 수 있으나, click은 클릭하는 것을 감지하는 반면 @change는 변화를 감지하여 함수를 실행한다는 차이점이 있다.

@keyup

키보드를 눌렀을 때 실행하는 것을 의미하며 대표적으로 enter/tab/delete/esc/space/up/down/left/right가 있다.

computed

computed 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성으로, 템플릿 안에서 너무 많은 연산을 처리 하지 않게 도와주는 장소이다.

<template>
<div>{{ message.split('').reverse().join('') }}</div>
</template>

위와같이 작성한다면 가독성뿐만 아니라 후에 유지보수에도 큰 어려움을 겪게될 것이다. 따라서 아래와같이 수정하도록 한다.

<template>
<div>{{ reverseMessage }}</div>
</template>

computed: {
  reverseMessage() {
    return this.message.split('').reverse().join('');
  }
}

위와같이 computed 속성에 표현식을 작성하게 되면, methods속성과는 달리 같은 문장이 반복되는 경우 딱 한번의 연산만 이루어지고 더이상의 연산은 이루어지지 않으며, 또한 data필드의 변경이 일어나는것을 실시간으로 감시하고 변경사항이 있으면 즉각적으로 반영한다는 특징이 있다.

watch

computed와 비슷한 역할을 수행하는 속성으로, data의 변경이 일어나는 것을 감시한다. watch는 비동기연산 중 중간상태를 설정할 수 있다는 장점을 가지고 있다. computed에 비해 코드가 복잡하며, 계속 감시하고있기 때문에 많아지면 용량이 많아져 정작 중요 performance를 내지 못할 수 있으므로 필요한 것만 작성하는것이 중요하다.
이러한 특성들 때문에 비동기연산을 제외한 대부분에서는 computed를 사용하는 것이 유리하다.