컴포지션 API - 기본옵션과 라이프사이클

공식 참고 문서

https://v3.ko.vuejs.org/guide/composition-api-introduction.html#composition-api-%E1%84%80%E1%85%B5%E1%84%8E%E1%85%A9

소개 | Vue.js

 

기존 코드

<template>
  <h1 @click="increase">
    {{ count }} / {{ doubleCount }}
  </h1>
  <h1 @click="changeMessage">
    {{ message }} / {{ reversedMessage }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello world!'
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    },
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
      message(newValue) {
        console.log(newValue)
      }
  },
  created() {
      console.log(this.message)
  },
  mounted() {
      console.log(this.count)
  },
  methods: {
    increase() {
      this.count += 1
    },
    changeMessage() {

    }
  }
}
</script>

 

컴포지션 API를 적용한 코드

vue 패키지안에 속성을 이용하여 기존코드의 기능을 사용할 수 있다.

또한 라이플 사이클중 created는 사용이 불가능하지만 setup을 이용하여 사용할 수 있다.

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <h1 @click="changeMessage">
    {{ message }}
  </h1>
</template>

<script>
import {ref, computed, watch, onMounted} from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => {
      return count.value * 2
    })
    function increase() {
      count.value += 1
    }

    const message = ref('HELLO WORLD!')
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })
    function changeMessage(){
      message.value = 'Good!!'
    }
    // 라이프사이클 중 created 지원하지 않는다 하지만 setup에 로그를 찍으면 같은 시점에 동작하는 것이다.
    console.log(message.value)

    watch(message, (newValue) => {
      console.log(newValue)
    })

    onMounted(() => {
      console.log(count.value)
    })
    return {
      count,
      increase,
      doubleCount,
      message,
      changeMessage,
      reversedMessage
    }
  }
}
</script>

 

브라우저 확인