Vue3 가즈아!

Vue3 란

기존 Vue2 에서 버전업이된 상태, vuex, vue-router 등의 대한 버전업도 동시에 진행되어야함. Vue 에서는 기본으로 Vue3 를 지원 중.

실무에서는 아직 Vue2 를 많이 사용하고 있지만, 조금씩 추세가 Vue3 로 이동하고 있기 때문에 어느정도 스터디가 필요로 해보여 시작하였습니다.

(아직 몇몇 라이브러리들이 Vue3를 제대로 지원하지 못하고 있음.)

Vue2 와 Vue3 의 가장 큰 차이점은 setup 이라는 것만 알아두면 될 것 같습니다.

설치

vue3 의 경우, vite 기반의 create-vue 를 선호함. (vite 가 webpack 보다 빠르기 때문에)

https://github.com/vuejs/create-vue

script

<script> 을 사용한 방식으로 설명. script 태그에 setup 속성을 추가하면 됩니다.
setup 속성을 사용하면 스크립트 태그에서 작성된 변수, 함수, import 를 별다른 설정 없이 템플릿 영역 내부에서 사용이 가능합니다. setup() 함수를 사용하면 요로모로 불편해지기 때문에 Vue 에서는 setup을 script 에 추가해서 사용할 수 있도록 함. (훨씬 깔끔 해짐.)
또한, 기존의 Vue2 에서는 mixins 를 사용해서 로직 재활용을 하였는데, 결국 이 방법은 컴포넌트의 병합을 이용한 방법이라 충돌이 발생할 문제도 있다. 이제는 Vue3 에서 커스텀 훅을 사용해서 기능 또한, 구현이 가능해졌다.

setup 함수 사용

// Vue3 setup 1
<template>
  <div @click="log">{{ msg }}</div>
  {{ data }}
</template>

<script>
import { onMounted } from 'vue'
import customOptions from './CustomHooks'

export default {
  props: {
    name: String
  },
  setup(props) {
    // 변수 선언
    const msg = 'Hello Setup1!'

    // 훅 가져오기.
    const data = customOptions()

    // 함수 선언
    function log() {
      console.log(msg)
    }

    onMounted(() => console.log(props.name, 'component mounted'))

    // template에 전달한다.
    return {
      msg,
      log,
      data
    }
  }
}
</script>

script setup 사용

// Vue3 setup 2
<script setup>
import { defineProps, onMounted } from 'vue'
import customOptions from './CustomHooks'

const props = defineProps({
  name: String
})
// 변수 선언
const msg = 'Hello Setup2!'

// 훅 가져오기
const data = customOptions()

// 함수 선언
function log() {
  console.log(msg)
}

onMounted(() => console.log(props.name, 'component mounted'))
</script>

<template>
  <!-- 템플릿 안에서 바로 사용 가능 -->
  <div @click="log">{{ msg }}</div>
  {{ data }}
</template>

반응형

script 영역 안에서 변수를 선언하고 해당 변수의 값을 변경하더라도 리렌더링이 되지 않습니다.

아래의 훅(reactive, ref)을 사용해서 반응형으로 바꿔줘야함.

reactive

reactive 는 객체만 반응형 데이터로 만드는데 사용 가능 (성능 관련 처리), useRef 와 비슷한 느낌

reactive는 object, array 이외에는 사용할 수 없습니다.

<script setup>
import { reactive } from "vue";

const obj = reactive({ message: "Hello World" });
const onClick = () => {
  obj.message = "Hi World";
};
</script>

<template>
  <div @click="onClick">{{ obj.message }}</div>
</template>

ref

반응형 인지하면서 값을 재할당. (반응형 값 데이터 형식)

변경시 .value 를 사용해서 바꿔줘야함.

사용시에도 무조건 .value 를 해주야함. 템플릿에서는 안써도 상관없음.

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

let obj = ref({ count: 0 });
const onClick = () => {
  obj.value.count++;
};
const onChange = () => {
  obj.value = {
    count: 100
  };
}
</script>

<template>
  <div>
    {{ obj.count }}
    <button @click="onClick">증가</button>
    <button @click="onChange">변경</button>
  </div>
</template>