vue.js의 data, computed, watch 간의 관계

vuejs logo

안녕하세요, Yo플레입니다.

오늘은 vue.js의 data, computed, watch간의 관계에 대해서 알아보겠습니다.

예제 먼저 보겠습니다.

예제 보러가기

<template>
  <div id="app">
    <div>
      <label>data : text :</label>
      <input v-model="text">
    </div>
    <div>
      <label>text :</label>
      <span> {{text}} </span>
    </div>
    <div>
      <label>computed(data) : text :</label>
      <span>{{computedText}}</span>
    </div>
    <div>
      <label>watchedText :</label>
      <span>{{watchedText}}</span>
    </div>
    <div>
      <label>watchedComputedText :</label>
      <span>{{watchedComputedText}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { 
      text: '',
      watchedText:'',
      watchedComputedText:''
    }
  },
  computed : {
    computedText() { return "COM " + this.text }
  },
  watch : {
    text() { this.watchedText = "WATCH " + this.text},
    computedText() { this.watchedComputedText = "WATCH " + this.computedText} 
  }

};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
}
div {
  display:block;
  margin-bottom:10px;
}
</style>

설명

화면에 입력내용을 vue에 저장하기

input에 v-model을 선언하고 data 변수명을 써주면 입력하는 내용이 vue.js의 data의 변수에 즉시 저장됩니다.

data의 내용을 화면에 표시하기

{{ 변수명 }} 으로 data의 변수명을 화면에 표시할 수 있습니다.

data

data는 vue.js에서 가장 핵심적인 요소입니다. data는 화면에서 사용자 조작을 입력받거나, vue.js에서 계산된 데이터를 화면에 표시하는 과정에서 중요한 역할을 합니다.

computed

제가 보기엔 computed는 computed(data)의 줄임말로 보입니다. 말 그대로 계산된 data입니다. data가 변경될 때 작동하며 자동으로 정해진 function을 통해 계산하여 값을 return합니다.

watch

watch는 data나 computed의 변화를 지켜보고 있습니다. data나 computed의 값을 감지하여 작동합니다.

감사합니다.