Computed

---

• computed는 컴포넌트의 computed 프로퍼티 안에 메서드 형태로 정의하며, 캐싱 기능을 가지고 있다.

• 의존중인 데이터의 변경이 일어나면 다시 연산을 한다.

• 기본적으로 getter지만, Proxy 처럼 get()과 set() 핸들러를 등록해서 사용할 수 있다.

Watch

---

• 컴포넌트의 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로 변환하지 않아도 된다.