watch - Handler

Vue의 watch에게 세 가지 속성을 지정할 수 있다.

• immediate
• deep
• handler

handler는 watch된 속성이 변경될 때 호출될 함수를 지정한다.

 

우리가 흔히 보았던 코드는 deep, immediate를 지정할 필요가 없는 경우 사용하는 단축표현이다. 단축표현 대신 아래처럼 사용할 수 있다.

 

watch: {
  movie: {
    handler(movie) {
      // Fetch data about the movie
      fetch(`/${movie}`).then((data) => {
        this.movieData = data;
      });
    }
  }
}

 

단축표현을 사용하여 아래처럼 함수를 직접 지정할 수 있다.

watch: {
  movie(movie) {
    // Fetch data about the movie
    fetch(`/${movie}`).then((data) => {
      this.movieData = data;
    });
  }
}