한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

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

Vue.js 가이드문서에서 더 자세한 내용을 확인할 수 있습니다.

1. 컴포지션 API비교

컴포지션 API는 코드가 복잡해지고, 확인해야할 로직들이 많이 섞여있는 경우 유용하게 사용을 할 수 있으며 단순한 코드에서는 오히려 컴포지션 API를 사용하는 것이 더 코드를 많이 작성해야할 수 있습니다. 따라서 무조건 컴포지션API의 사용을 추천하는 것은 아니며 상황에 맞춰 적절하게 사용을 하는 것을 권장합니다.

1-1 수정 전

App.vue

<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() {
      this.message = 'Good?!'
    }
  }
}
</script>

1-2 컴포지션 API 적용

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

<script>
import { ref, computed, watch, onMounted } from 'vue'  //on이 붙습니다

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('')
    })
    watch(message, newValue => {
      console.log(newValue)
    })
    function changeMessage() {
      message.value = "Good?!"
    }
    console.log(message.value)    // created()

    onMounted(() => {             //mounted()
      console.log(count.value)
    })

    return {
      count,
      doubleCount,
      increase,
      message,
      changeMessage,
      reversedMessage
    }
  }
}
</script>

✅ 컴포지션 API, 라이프사이클 created(), mounted() 주의사항

• mounted()
  • vue라는 패키지에서 OnMounted라는 패키지를 가져옵니다.
  • return 키워드 위쪽에서 OnMounted()를 실행시켜줍니다.
• created()
  • 따로 함수를 사용하지 않으며, setup이라는 메소드가 컴포넌트가 생성된 직후에 동작하기 때문에 setup이라는 메소드 내부의 로직은 created부분에 작성하는 것과 동일한 효과를 낼 수 있습니다.