[TIL] Vue3 Composition API

vue3는 이번에 처음 배우고 있다. 물론 vue2에서 사용하던 문법을 대게 사용 할수는 있지만 대세가 composition API로 기울고 있기 때문에 해당 문법에 익숙해져 보자.

기존 싱글파일 컴포넌트

<template>
  <div>
  	<div>
      <input type="text" v-model="message" />
  	</div>
	<p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
  	 message: function(val) {
     	console.log(val)
     }
  }
};
</script>
<style></style>

Composition API

<script setup>
import { ref, onUpdated } from 'vue';
const message = ref('');
onUpdated(() => {
  console.log(message.value)
});
</script>
<template>
  <div>
  	<div>
      <input type="text" v-model="message" />
  	</div>
	<p>{{ message }}</p>
  </div>
</template>
<style></style>

vue2에서 composition api를 사용하려면 따로 라이브러리를 설치해야 했으나, vue3는 기본적으로 내장되어있다. 그리고 눈에 가장 눈에 띄는 문법은 리액트와 매우 흡사해진 느낌이다.
composition api의 onUpdated는 리액트 훅스의 useEffect와 리액트 라이프사이클의 componentDidUpdate 와 사용법이 전체적으로 크게 달라보이지 않는다.