methods, computed, watch

간단하게 주석으로 간략 기능정리.

<template>
  <div>
    <button @click="changeText">{{ text }}</button>
    {{ watchMessage }}
    
    <h1>함수 호출 값 : {{ changeText() }}</h1>
    <h1>함수 호출 값 : {{ changeText() }}</h1>
    <h1>함수 호출 값 : {{ changeText() }}</h1>

    <!-- computed는 데이터로 인식되어 함수 호출시에도 ()를 쓰지 않음.  -->
    <h1>computed 함수 호출 값 : {{ computedText }}</h1>  
    <h1>computed 함수 호출 값 : {{ computedText }}</h1>
    <h1>computed 함수 호출 값 : {{ computedText }}</h1>
    <!-- console.log 를 보면 computed를 세번 호출했지만 캐싱으로 인해 실제 호출은 한번만 수행됨 -->
  </div>
</template>
<script>
export default {
    data() {
      return {
        // vue 에 사용될 변수는 여기서 선언
        text : 'vue test 문구 입니다.',
        watchMessage : ''
      }
    },  
    methods: {
      // methods : 사용할 함수는 여기서 정의
      changeText() {
        // 변수가 객체 접근시 this 키워드 이용.
        console.log('일반 mothods로 호출');
        this.text = '변경됨.'
      }
    },
    computed: {
      // computed : 캐싱기능이 있어 내부 로직 수행은 한번만 함.
      // methods와 사용법은 동일하나 return 이 필수. 
      // 형태는 함수지만 데이터로 인식됨.
      computedText() {
        console.log('computed를 생성하였습니다.')
        return this.text.split('').reverse().join('')
      }
    },
    watch: {
      // watch: 변수에 트리거를 걸어둔다. 해당 변수 값이 변경됨을 감지하면 실행됨.
      // 사용예 : paging 번호 클릭 처리 시 
      text(){ // 내가 감시할 변수와 같은 명칭의 함수를 생성하는 것이 필요함.
        this.watchMessage = 'watch 동작함'
      }
    },
}

</script>
<style>
  
</style>