computed
는 컴포넌트의 computed
프로퍼티 안에 메서드 형태로 정의하며, 캐싱 기능을 가지고 있다.
의존중인 데이터의 변경이 일어나면 다시 연산을 한다.
기본적으로 getter
지만, Proxy
처럼 get()
과 set()
핸들러를 등록해서 사용할 수 있다.
컴포넌트의 watch
프로퍼티 안에 dataname([newValue] [, oldValue]) { ... }
형태로 정의하며, 해당 데이터의 변화가 감지되면 함수가 실행된다.
newValue
와 oldValue
를 통해 기존 데이터와 새로운 데이터를 사용할 수 있다.
참조형 데이터를 감시할 때, 객체의 프로퍼티만 수정하면 변화를 감지할 수 없다.
위처럼 참조형 데이터는 handler([newValue] [, oldValue])
함수를 정의하고, deep
옵션을 true
로 설정하면 해결이 가능하다.
watch: {
dataName: {
handler(newValue, oldValue) {
...
},
deep: true
}
}
immediate
옵션을 true
로 설정하면 초기에 데이터의 변화가 감지되지 않아도 즉시 실행된다.v-bind
디렉티브를 이용해서 객체 혹은 배열 형태로 손쉽게 클래스의 변경이 가능하다.
객체 형태는 프로퍼티 축약이 가능하다.
computed
옵션으로 분리해서 사용이 가능하다.
스타일 바인딩은 클래스 바인딩과 다르게 클래스 이름을 '(따옴표)
로 묶거나, kebab-case
로 변환하지 않아도 된다.