KAKAO_COMPUTED

by duckduck0054

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>06-16</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>

<body>
<div id="app">
  <input type="text" v-model="dummy" placeholder="아무값이나 입력"/>
  <div>
    method: {{ methodNow() }}
  </div>
  <div>
    computed: {{ computedNow }}
  </div>
</div>
</body>
<script type="text/javascript">
const app = new Vue({
  el: '#app',
  data: {
    dummy: '',
  },
  methods: {
    methodNow () {
      return new Date();
    }
  },
  computed: {
    computedNow () {
      return new Date();
    },
  }
});

/*
함수의 결과값을 표시하려면 methods 에 선언하고 {{ }} 안에서 함수를 실행(!) 하던지,
아니면 computed 에 선언하고 함수명만(!) 전달하면 된다.
computed 에 선언된 함수는 속성처럼 사용되는데, 그 이유는 해당 속성에 대한 getter 함수로 사용되기 때문이다.
기본적으로 getter 함수로 사용되지만, 필요에 따라 setter 도 지정해줄 수 있다.

주요한 차이점은 계산된 속성(computed)의 경우 결과가 캐싱된다는 사실이다.
계산의 의존하고 있는 모델들이 변경되기 전까지는 캐싱이 유지되기 때문에 복잡한일 경우 계산된 속성을 사용하는 것이 바람직하다.

다른 라이브러리에는 없는 개념이어서 낯설지만, 결과가 캐싱되면서도 계산을 위한 레퍼런스가 변경되면 갱신되는 특성탓인지 data 보다는 computed 가 생각보다 많이 쓰이게 된다.
*/
</script>
</html>