vue watch 예제, vue watch 사용법, vue.js watch 예제, vuejs watch 사용법, vue3 watch, vue watch example

`

vue에서의 watch란

watch란 지켜보다라는 뜻이며, 말 그대로 특정 데이터를 보며 값이 바뀌면 별도의 콜백 함수에서 데이터를 처리하게 되며, lazy하게 실행됩니다.
즉, watch에 등록한 콜백함수는 감시된 소스가 변경된 경우에만 호출됩니다.
이는 vue3에서의 watch() API는 Option API(vue2)에서의 this.$watch 와 동일한 역할을 하는것을 의미합니다.

watch에 대한 특징은 다음과 같습니다.
- lazy 하게 수행됩니다.
- 감시된 상태의 이전 값과 현재 값 모두에 액세스합니다.

watch 예제, watch 사용법

watch에 대한 사용코드를 살펴보겟습니다.
watch에서 감시할 데이터 소스는 값을 반환하는 게터 함수이거나 직접 참조일 수 있습니다.

// getter 함수를 참조 
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// ref 객체를 참조
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */


;})

예제소스를 더 살펴볼까요?
아래와 같은 소스는 changeValues() 메소드가 실행되면,
watch에 의해 새로운값과 이전의 값이 출력되게 됩니다.

setup() {
  const name = ref('')

  watch(name, (newValues, prevValues) => {
    console.log(newValues, prevValues)
 // changeValues를 호출하면 console창에 아래와 같이 찍힙니다.
 //  "John",  ""
  });

  const changeValues = () => {
    name.value = 'John'
  }
  return { changeValues }
}

여러개의 데이터 watch하기

watch API 는 배열(array)를 파라미터로 넘겨서 여러개의 데이터 변화를 감시할 수 있습니다.

 

const firstName = ref('')
const lastName = ref('')

watch([firstName, lastName], (newValues, prevValues) => {
  console.log(newValues, prevValues)
})

총평

사용처는 HTTP 호출, 로컬 저장소에 데이터 저장, 타이머 설정, 디버깅 등 용도에서 watch를 사용할 수 있을겁니다.
쓰다보면서 익숙해지면 유용한것처럼 보이지만, 아직은 마땅히 적극적으로 써본적은 없어서 잘 모르겠습니다.
반응형 데이터를 쓴다거나 computed를 쓰면 watch를 쓸일이 별로 없을거 같은데,
계속해서 vue를 사용해보면서 watch로 코드개선할 수 없는지 고민해보아야겠습니다.


vue watch 예제, vue watch 사용법, vue.js watch 예제, vuejs watch 사용법, vue3 watch, vue watch example
#vue,#vuejs,#vue3,#vue3.0,#vue.js,#vuejs3,#watch,#computed,#사용법,#예제,#뷰,#example

 

https://devscb.com/post/68

vue watch example, how to use vue watch, vue.js watch example, how to use vuejs watch, vue3 watch, vue watch example