[Vue.js] 03. Data & Computed

Data 속성과 Methods

Data 속성

컴포넌트의 data 옵션은 함수이다.

이 함수는 하나의 객체만을 반환하며, Vue는 반응형 시스템으로 객체를 감싸 컴포넌트 인스턴스에 $data로 저장한다.

편의상 최상위 수준의 속성도 컴포넌트 인스턴스를 통해 바로 노출된다.

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.$data.count) // => 4
console.log(vm.count)       // => 4

// vm.count에 값을 할당하면 $data.count도 갱신됩니다.
vm.count = 5
console.log(vm.$data.count) // => 5

// 반대로도 마찬가지입니다.
vm.$data.count = 6
console.log(vm.count) // => 6

data()는 인스턴스가 처음 생성될 때만 추가되므로 data의 return 값에 사용할 모든 속성을 적어두어야 한다.

당장 원하는 값이 없는 경우에는 null, undefined 또는 다른 지정 값을 사용하도록 한다.

 

새로운 속성을 data에 포함하지 않고 컴포넌트 인스턴스에 추가할 수 있다.

그러나 그렇게 추가한 속성은 $data로 추가되지 않기 때문에 Vue 반응형 시스템에 의해 자동으로 추적되지 않는다.

 

Vue는 컴포넌트 인스턴스를 통해 자체 내장 API를 노출할 때, $를 접두사로 사용한다.

또한 내부 속성 정의를 위한 접두사로 _를 사용한다.

따라서 data에 속성들을 정의할 때 저 두 문자($, _)로 시작하는 이름은 짓지 않도록 한다.

 

Methods

컴포넌트 인스턴스에 메소드를 추가하려면 methods 옵션을 이용한다.

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this`는 컴포넌트 인스턴스를 참조합니다.
      this.count++
    }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

vm.increment()

console.log(vm.count) // => 5

Vue는 methods 안에서 컴포넌트 인스턴스를 항상 참조할 수 있도록 this 값을 자동으로 바인딩한다.

따라서 화살표 함수를 사용하여 methods를 지정하면 Vue가 적절한 this값을 바인딩 하지 못하므로 화살표 함수는 사용하지 않아야 한다.

 

컴포넌트 템플릿 내부에서 methods를 접근할 수 있다.

methods는 일반적으로 템플릿 내부에서 이벤트 리스너로 사용된다.

<button @click="increment">Up vote</button>

 

템플릿에서 메소드를 직접 호출할 수도 있으나, 이는 computed 속성을 사용하는 것이 더 낫다.

computed 속성 실행이 불가능한 상황에서는 메소드를 사용할 수도 있다는 뜻.

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

Computed 속성과 Watch

Computed 속성

템플릿 내부에 표현식을 넣는 방식은 간단한 연산을 할 경우에는 유용하지만, 복잡해지게 되면 유지보수성 및 가독성이 떨어지게 된다.

이럴 때 사용하는 방법이 Computed 속성.

Vue.createApp({
  data() {
    return {
      author: {
        name: '존 도우',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // computed getter
    publishedBooksMessage() {
      // 여기서의 `this` 는 vm 인스턴스이다.
      return this.author.books.length > 0 ? '있음' : '없음'
    }
  }
}).mount('#computed-basics')

Computed 속성을 사용할 때는 ( )을 떼고 일반 속성처럼 사용하면 된다.

 

Watch 속성

대부분의 경우 computed 속성이 더 적절하나 사용자 지정 감시자(watcher)가 필요한 경우가 있다.

데이터 변경에 대한 응답으로 비동기 혹은 비용이 많이 드는 작업을 수행하려는 경우에 유용하다.

<div id="watch-example">
  <p>
    예/아니오 질문을 물어보세요.
    <input v-model="question" />
  </p>
  <p>{{ answer }}</p>
</div>

<!-- 이미 Ajax 라이브러리의 풍부한 생태계와 범용 유틸리티 메소드 컬렉션이 있기 때문에, -->
<!-- Vue 코어는 다시 만들지 않아 작게 유지됩니다. -->
<!-- 이것은 이미 익숙한 것을 선택할 수 있는 자유를 줍니다. -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script>
  const watchExampleVM = Vue.createApp({
    data() {
      return {
        question: '',
        answer: '질문은 보통 물음표를 포합합니다. ;-)'
      }
    },
    watch: {
      // question 이 변경될 때마다, 이 함수가 실행될 것 입니다.
      question(newQuestion, oldQuestion) {
        if (newQuestion.indexOf('?') > -1) {
          this.getAnswer()
        }
      }
    },
    methods: {
      getAnswer() {
        this.answer = '생각중...'
        axios
          .get('https://yesno.wtf/api')
          .then(response => {
            this.answer = response.data.answer
          })
          .catch(error => {
            this.answer = '에러! API에 닿지 못했습니다. ' + error
          })
      }
    }
  }).mount('#watch-example')
</script>

이 코드의 경우 질문을 한 뒤 ?를 입력하면, 랜덤값에 따라 yes, no 또는 에러를 출력하는 코드이다.

이렇듯, watch옵션을 사용하면 비동기 작업(API 접근)을 수행하고, 이 작업을 수행하기 위한 조건을 설정할 수 있다.

computed 속성은 이러한 작업을 수행하지 못한다.

 

그러나 다른 데이터를 기반으로 어떤 데이터를 변경하는 작업을 수행할 때 watch옵션을 사용하는 것이 무조건 좋다고는 할 수 없다.

적절한 상황에 따라 computed와 watch를 활용하는 것이 좋다.