Vue.js 기초 파트 5 | Watch 속성

오늘은 Vue.js의 watch 속성에 대해 이야기하겠습니다.

이것은 내 Vue.js 기본 시리즈의 5부입니다. 4부를 읽으려면 클릭하세요(스포일러! 4부는 템플릿 참조에 관한 것입니다).
watchers는 무엇입니까? 질문 속에 답이 숨겨져 있습니다. Watchers 모든 데이터 또는 계산된 속성을 감시하고 값 변경에 따라 코드를 실행합니다. 아래에서 특정 값에서 일부 코드를 실행(사용자에게 경고)하는 작은 프로그램을 만들었습니다. 먼저 아래 코드를 한 줄씩 설명하고, 감시자를 어디에 사용할 수 있는지에 대해 이야기하겠습니다. 자세한 내용을 설명하기 전에 값을 늘리고 줄이는 카운터를 작성했습니다.

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    watch: {
      count(newCount) {
        if(newCount === 5) {
          alert("count is five!")
        }
      }
    }
  }
</script>

<template>
  <h1>Count : {{ count }}</h1>
  <button @click="count++">Increase</button>
  <button @click="count--">Decrease</button>
  <p v-if="count < 5"> Less than 5! </p>
  <p v-else-if="count > 5"> Greater than 5! </p>
  <p v-else="count === 5"> Count is 5! </p>
</template>

그래서 우리는 초기 값이 0인 count를 얻었습니다. 그것이 하는 일은 우리가 있는 숫자를 추적하는 것뿐입니다. 그 아래에는 watch 속성이 있습니다. 주의 깊게 봐! count 데이터 개체에 있는 값이 이제 감시 개체에서 '함수'입니다. 이름이 일치해야 합니다. 그렇지 않으면watch 속성에서 '감시' 대상을 알 수 없습니다.

watch: {
      count(newCount) {
        if(newCount === 5) {
          alert("count is five!")
        }
      }
    }

따라서 위의 코드는 if 블록에서 코드를 실행하기 위해 (===) 5와 같은 count 데이터 값을 '감시'합니다. 감시자는 자동으로 새 값을 인수로 받습니다. 따라서 count의 새 값이 여기서 인수입니다. newCount가 5에 도달하면 alert("count is five!") 이 코드가 실행됩니다. 단순히 "카운트가 5입니다!"라는 경고 메시지를 표시합니다.

코드의 템플릿 부분을 위한 시간:

<h1>Count : {{ count }}</h1>
  <button @click="count++">Increase</button>
  <button @click="count--">Decrease</button>
  <p v-if="count < 5"> Less than 5! </p>
  <p v-else-if="count > 5"> Greater than 5! </p>
  <p v-else="count === 5"> Count is 5! </p>

버튼을 클릭하면 각각 증가 및 감소합니다count. 마지막 세 줄은 count 값에 따라 조건부 렌더링을 만듭니다. 조건부 렌더링에 대해 자세히 알아보려면 | 조건부 렌더링에 도달하려면 조금 아래로 스크롤하십시오.

괜찮아? 그런데 우리가 왜 이러는 걸까요?

사용자가 값을 변경할 때 Vue 앱의 특정 요소 또는 구성 요소에 클래스를 추가하려는 경우 감시자를 사용할 수 있습니다.

애플리케이션 데이터를 변경하기 위해 API 응답(예: 데이터 가져오기)을 호출할 때.

전환 적용 시

감시자 대. 계산됨

계산된 속성이 캐시되므로 값이 변경될 때만 다시 계산됩니다. 반대로 감시자는 매번 실행됩니다.

파트 5는 여기까지입니다. Vue.js에서 watch 속성과 computed 속성과 watch 속성의 차이점에 대해 이야기했습니다.

다음으로 Vue의 구성 요소를 살펴보겠습니다.