computed, methods, watch

computed

• 어떤 값을 계산된 값으로 리턴해줌
• 임의의 데이터 리턴하는 함수 작성 => Vue 인스턴스로 등록됨
• 템플릿단에서 너무 많은 자바스크립트를 사용하면 가독성이 떨어짐

<p>{{ author.books.length > 0 ? 'yes' : 'no' }}</p>

data() {
  return {
    author: {
      name: 'hj',
      books: ['book1', 'book2', 'book3']
    }
  }
},

🔻🔻🔻

<p>{{ yesOrNo }}</p>
...

computed: {
  yesOrNo() {
    return this.author.books.length > 0 ? 'yes' : 'no';
  }
}

computed vs methods

• computed : 결과를 캐시함
• methods
  • 컴포넌트가 리렌더링 될때마다 함수를 다시 실행
  • 성능 문제 발생할 수 있음
  • 매개변수를 넘겨야할 때는 computed보다 methods를 사용
    
    
    

watch

• 지정한 데이터 감시
• 데이터가 변경될때마다 수행해야할 작업이 있을 때 사용

data() {
  return {
  	message: ''
  }
},
// 객체의 추가, 삭제 변경 감지
// 중첩된 속성의 데이터 변화는 감지X
watch: {
  message() {
  	console.log(this.message);
  }
}
...

위와 같이 작성하면 message의 값이 변할 때마다 콘솔에 로그가 찍힌다.

option

• deep : 중첩된 객체도 감시할지 설정
• immediate : 처음 값을 읽어들이는 시점에도 실행할지 설정

옵션을 사용할 경우, 수행할 작업은 handler에 작성해주면 된다.

data() {
  return {
    author: {
      name: 'hj',
      books: ['book1', 'book2', 'book3']
    }
  }
},
  
// athor의 내부 속성 데이터 값이 변하는 것도 감지
// 처음 값 읽을 때도 호출
watch: {
  author: {
  	handler() {
  		...
  	},
  	deep: true,
  	immediate: true
  }
}

여러 개의 값을 감시하고 싶은 경우, 인스턴스 메소드를 이용해서 감시할 데이터를 함수로 등록하면 된다.

// 인스턴스 메소드를 이용해 watch 등록
  
$watch('감시할 데이터', function() {
  // 수행할 작업
  ...
}, { /* 옵션 */ })

// value1, value2를 함께 감시하고 싶은 경우
  
$watch(function() {
  return ['value1', 'value2'];
 }, function() {
  // 수행할 작업
  ...
 })