Vue3 Composition API

Vue3의 새로운 모습

Vue3가 나왔고 사용법이나 문법등이 달라졌다.
기존의 Vue2 버전에서는 data, method 구역등을 나눠서 보기 좋았으나 이것이 독이 된 경우도 있다.
컴포넌트를 쪼갤필요없지만 비즈니스로직이 길어진 경우 그 안에서 데이터와 함수를 매칭하고 이것이 이걸과 같은지 한덩어리인지 구분이 안갔었다.

나만 그런가 하고 넘어간 부분인데 Vue3에서는 이것을 바꾸었다.
좀더 리액트스러워진 기분이 들었다.

Vue2와 Vue3 비교

<template>
  <div id="app">
    <h1 @click="increase">
      {{ count }} / {{ doubleCount }}
    </h1>
    <h1>
      {{ massage }} / {{ reverceMassage}}
    </h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      massage:"Hello world", // 1) 메세지관련
      count:0 // 2) 카운터관련
    }
  },
  computed: {
    doubleCount() { // 2) 카운터관련
      return this.count * 2;
    },
    reverceMassage() { // 1) 메세지관련
      return this.massage.split('').reverse().join('');
    }
  },
  methods: { 
    increase() { // 2) 카운터관련
      this.count += 1;
    }
  }
}
</script>

소스가 짧다면 이해하기 쉽지만 점점 길어진다면 해당 내용을 파악하는데도 꽤 시간이 길 것이다.
Vue3에서는 이렇게 변경되었다.

<template>
  <div id="app">
    <h1 @click="increase">
      {{ count }} / {{ doubleCount }}
    </h1>
    <h1>
      {{ massage }} / {{ reverceMassage }}
    </h1>
  </div>
</template>

<script>
import { ref, computed } from 'vue'; // 뷰에서 사용할 것들 불러오기

export default {
  setup(){
    // 1) 메세지관련
    const massage = ref("Hello world");
    const reverceMassage = computed(() => { return massage.value.split('').reverse().join('') })
	
    // 2) 카운터관련
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    function increase() {
      return count.value += 1;
    }
    
    // 3) 모든값 반영
    return {
      massage,
      reverceMassage,
      count,
      doubleCount,
      increase
    }
  }
}
</script>

리액트의 Hook느낌과 비슷하게 변형되었다.
덩어리는 함께 가져가는 느낌이 들며 리액트스러운 모습에 깜짝놀랐다.

중간에 ref라는 것이 보이는데 vue의 객체이며 값을 ref에 넣어서 보내주지않으면 반응성을 띄지않게되어 눌러도 값의 변화는 없다.
그리고 computed도 예전처럼 구역으로쓰는 것이 아닌 함수처럼 빼서 사용한다.

마무리

기존의 Vue2는 조금더 딱딱하고 규정에 맞게 쓰라고한다면
이번에는 그 규정을 자율적으로 쓰되 규정을 없애지는 않았다.
좀더 리액트스러운 냄새가 나지만 나로써는 좀더 편하고 코드를 간결하게 짤 수 있어서 좋은 느낌이다.