[vue 3] watch 와 computed

// watch
  data: {
    firstName: 'Vue',
    lastName: 'js',
    fullName: 'Vue js'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }

// computed
  data: {
    firstName: 'Vue',
    lastName: 'js'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

1. computed

  - 계산해야 하는 목표를 정의하는 형식으로 선언형 프로그래밍이다.

  - 캐싱을 제공한다. 때문에 computed를 이용하면 위 예제에서 'firstName' 혹은 'lastName'의 값이 변하지 않는한 fullName을 몇번이고 불러도 그전에 계산되어있던 값을 반환한다.

2. watch

  - 감시할 데이터를 지정하고 그 데이터 값이 바뀌면 선언한 함수를 실행하는 방식으로 명령형 프로그래밍이다.

  - 데이터를 업데이트 할 때 비동기처리나 많은 처리를 실행하고 싶은 경우 편리하다.

 

비교

---

• 선언형(computed) 프로그래밍이 명령형(watch) 프로그래밍보다 코드 반복이 적은 등 우수하다고 평가하곤 한다!

 

 

[참고]

https://velog.io/@jinsu6688/vuejs-computed