Vue2와 Vue3의 차이

 

Composition API

• Vue2에서는 Options API를 사용한다. Options API는 개발자에게 코드의 직관성, 가독성을 높이지만 프로젝트의 규모가 커질수록 유지보수가 어려워진다. 이를 보완하기 위해 Vue3에서는 Composition API를 사용한다.
• https://hjkang.tistory.com/73

 

Vue2

<script>
export default {
  data: () => ({
    count: 0,
  })
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
}
</script>

 

Vue3

<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => count.value++;
const decrement = () => count.value--;
</script>

 

 

 

Fragments

• Vue2에서는 컴포넌트의 루트 노드가 한 개였어야 했지만, Vue3에서는 여러 개의 루트 노드를 지정할 수 있다.

 

Vue2

<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

 

Vue3

<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

 

 

 

CSS 변수

• Vue3에서는 template에서 정의한 변수를 그대로 style에서 사용할 수 있다.

<template>
  <div class="text">hello world</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'blue'
    }
  }
}
</script>

<style>
.text {
  color: var(--color);
}
</style>

 

 

 

v-if

• Vue2에서는 v-if를 사용할 때 key 사용을 권장했지만 Vue3에서는 key를 자동으로 생성해준다.

 

Vue2

<div v-if="condition" key="yes">YES</div>

 

Vue3

<div v-if="condition">YES</div>

 

 

 

v-for

• template에서 v-for의 사용이 가능해졌다.

<template v-for="item in list" :key="item.id">
   <div>...</div>
</template>

 

 

참고로 Vue3 부터는 v-if와 v-for을 한 곳에서 사용하지 못한다.

 

 

---

참고

- https://moz1e.tistory.com/540

- https://engineer-mole.tistory.com/419