[Vue3] data() -> <script setup> 문법

 

 

 

연습만이 살 길이지만 연습을 안하니까 정리라도 해보자는 뜻에서 쓰는 글.

 

Vue3는 export default 를 쓰지 않는다.

근데 구글링하다보면 data() 문법으로 된 게 많다보니,

이를 <script setup> 으로 변경하는 연습입니다.

 

export default {
  data() {
    return {
      fooProps: {
        id: 1,
        msg: 'Hello',
      } 
    }
  }
}

 

↓

<script setup>
import { reactive } from 'vue'

const fooProps = reactive({
  id: 1,
  msg: 'Hello'
});
</script>

 

써보니 별 거 없네요~

 

객체일 땐 reactive 를 쓰고

숫자, 문자열 같은 기본형일 땐 ref를 쓰고

 

이거 import해주고

data() 랑 똑같이 선언하면 되네요.