07. Watcher

Watcher도 computed와 유사하게 변경되는 값만 보고 처리할 수 있다

하지만 구성상 항목별로 다 코드를 작성해야 한다.

 

 

  data() {

    return {

      counter: 0,

      name: '',

      lastName: ''

    };

  },

 

data()에 name과 lastName이 있다고 하면 아래와 같이 watch는 구현해야 한다.

  watch: {

    // data나 compute에 있는 속성에 사용한 이름을 메서드로 사용 (충돌 안남)

    // name이 바뀔때마다 watch의 name이 Vue에 의해 자동 실행. counter, fullname 가능

    name(value) {

      if ( value === '' ) {

        this.fullname = '';

      } else {

        this.fullname = value + ' ' + this.lastName;

      }

    },

    lastName(value) {

      if ( value === '' ) {

        this.fullname = '';

      } else {

        this.fullname = this.name + ' ' + value ;

      }

    }

 

이 코드를 computed로 구현하면 아래와 같다

 

  computed: {

    fullname() {

      console.log("computed");

      if (this.name === '' || this.lastName === '' ){

        return '';

      }

      return this.name + ' ' + this.lastName;

    },

  },

 

 

따라서 Watch 사용이 가능하긴 하나 Computed가 보다 효율적이다.

 

하지만 coutner의 값이 50이 넘어갈때만 동작을 해야 한다는 조건을 건다면 이때는 watch가 보다 효율적이다.

 

    counter(value) {

      if(value > 50) {

        this.counter = 0;

      }

    }

 

 

또는 데이터가 변하면 HTTP REQUEST를 전송해야 한다던가 Timer등의 동작을 해야 할때 유용할 수 있다.

 

    counter(value) {

      if(value > 50) {

        const that = this;

        setTimeout(function () {

          that.counter = 0;

        }, 2000)        

      }

    }