Vue 3 에서의 .vue 구조 분석

<script setup lang="ts">
import { reactive, ref } from 'vue';

defineProps<{ msg: string }>();

const count = ref(1);

// ref == reactive 두 API는 같음!
// 무조건 변수에 지정 안하면 사용 못함
const state = ref({
  list : ['00', '01', '02']
});
</script>

위와 같은 script setup 이라는 선언 방식이 추가되었다.

기존에는 아래와 같은 script 에서 별도의 폼을 이용했었다.

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    
  },
})
</script>

점점 편리해지는 것 같다!!