vue3 문법[computed,Getter,Setter,Watch]

computed

<template>
  <Fruits />
</template>

<script>
import Fruits from '~/components/Fruits'

export default {
  components: {
    Fruits
  },
}
</script>

App.vue

<template>
  <section v-if="hasFruit">
    <h1>Fruits</h1>
    <ul>
      <li
        v-for="fruit in fruits"
        :key="fruit">
        {{ fruit }}
      </li>
    </ul>
  </section>
  <section>
    <h1>Reverse Fruits</h1>
    <ul>
      <li
        v-for="fruit in reverseFruits"
        :key="fruit">
        {{ fruit }}
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        'Apple','Banana','Cherry'
      ]
    }
  },
  computed: { 
    hasFruit() {   // 계산된 데이터
      return this.fruits.length > 0
    },
  reverseFruits() {
    return this.fruits.map(fruit => {
      //'Apple'=>['A','p','p','l','e']
      // => ['e','l','p','p','A'] => 'elppA'
      return fruit.split('').reverse().join('')
    })
  }
  }
}
</script>

Fruits.vue 파일로

실행결과는 이렇게 나오는걸 확인할 수 있다.

computed 라는 vue.js 옵션을 통해 기존의 데이터를 우리가 원하는 방향으로 수정해서 사용할 수 있다.

Computed 캐싱

<template>
  <h1>{{ msg + '??' }}</h1>  
  <h1>{{ reversedMessage }}</h1> 
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>  
  <h1>{{ reversedMessage }}</h1>     
</template>

<script>
export default {
  data() {
    return {
      msg : 'Hello Computed!'
    }
  },
  computed:{    //캐싱 이후 연산을 한번만하고 값을 가져다가 씀
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  },
    methods: {  //값을 불러올때 마다 계속 계산을 해야함
    reverseMessage() {
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>

특정 데이터를 한번 계산하고 추가적으로 사용하더라도 부담없이 사용할 수 있다.

Getter, Setter

<template>
  <button @click="add">
    ADD
  </button>
  <h1>{{ msg + '??' }}</h1>  
  <h1>{{ reversedMessage }}</h1> 
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>  
  <h1>{{ reversedMessage }}</h1>     
</template>

<script>
export default {
  data() {
    return {
      //Getter, Setter 값 변경 가능
      msg : 'Hello Computed!'
    }
  },
  computed:{    //캐싱 이후 연산을 한번만하고 값을 가져다가 씀
  //Getter  읽기 전용이다. 값 변경 불가능
    // reversedMessage() {
    //   return this.msg.split('').reverse().join('')  
    // }
    //Getter,Setter
    reversedMessage : {
      get() {
        return this.msg.split('').reverse().join('')  
      },
      set(value) {
        this.msg = value
      }
    }
  },
    methods : {
      add() {
        this.reversedMessage +='!?'   
        //this.msg +='!?'          //가능
      }
    }

}
</script>

Watch

<template>
  <h1 @click="changeMessage">
    {{ msg }}
  </h1>
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg : 'Hello?'
    }
  },
  computed : {
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  },
  watch:{ 
    msg() {//특정한 데이터가 변경되는걸 감시해서 추가적인 로직을 만들어줄때 실행
      console.log('msg:',this.msg)
    },
    msg2(value) {//매개변수 이용가능
      console.log('msg:',value)
    },
    reversedMessage() { //데이터 변경이 감시되면 로직이 실행
      console.log('reversedMessage:', this.reversedMessage)
    }
  },
  methods : {
    changeMessage() {
      this.msg = 'Good!'
    }
  }
}
</script>