Vue > Computed VS Watch [3부]

1. ToDo

- Vue 공부하면서 정리정리!

2. Computed는? Watch는?

• Computed

  • method와 같은 개념이지만 다른점은 호출 시에 ()를 적지 않고 변수 호출과 같이 써준다.
  • Return 값이 무조건 존재해야한다.
  • 매개변수를 받을 수 없다.
  • 계산과 가공된 데이터의 Getter라고도 한다.
  • 간단 정리 : 특정 값을 계산 또는 가공하여 보여줄 때 사용한다.

• Watch

  • 데이터가 변경되어 바로 API 등의 다른 작업을 해야할 때 사용된다.
  • 비동기 적으로 실행되므로 동일 템플릿 내의 오래걸리는 작업을 해야할 때 사용한다.
  • 간단 정리 : 특정 값이 변경되어 콜백작업이나 외부 호출작업을 해야할 때 사용한다.

3. How to use?

• Computed

  computed : {
      MethodName: {
           get : {
                return ~Blah~Blah~Blah~Blah
           },
           set : (parameter) => {
                ~Blah~Blah~Blah~Blah
           }
    }
  }

• Watch

  watch : {
      MethodName: (parameter) => {
           ~Blah~Blah~Blah~Blah
           [ 다른객체 ~~~ ]
    }
  }

• 실전에서 꼭 써봅시당