[Vue3] 변경사항

최신  Vue3 프로젝트생성

Vue3 Quick Start 참고

1. Vue 프로젝트 생성: 다음과 같은 npm 명령어 입력
   
   npm create vue@latest
2. Vue 3.9 기준으로 TypeScript, JSX, Vue Router, Pinia, Vitest 등을 기본적으로 적용하여 생성할 수 있어, 프로젝트 생성이 상당히 편리해짐
   ✔ Project name: … <your-project-name>
   ✔ Add TypeScript? … No / Yes
   ✔ Add JSX Support? … No / Yes
   ✔ Add Vue Router for Single Page Application development? … No / Yes
   ✔ Add Pinia for state management? … No / Yes
   ✔ Add Vitest for Unit testing? … No / Yes
   ✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
   ✔ Add ESLint for code quality? … No / Yes
   ✔ Add Prettier for code formatting? … No / Yes
   
   Scaffolding project in ./<your-project-name>...
   Done.

Script Setup 문법 사용선언

Vue3부터 setup 함수를 더욱 간결하게 표현할 수 있는 Script Setup 문법을 제공함
간단히 <script /> 태그에 setup 속성을 추가하면 활성화 됨

<script setup> 
    ... 
</script>

TypeScript를 기준으로 작성된 예시코드 과거에 비해 표현이 간결해짐

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

    type ListItem = {
        Text:string, 
        Index:number
    };


    //Variables
    const listItems = ref([] as Array<ListItem>);
    const selectedIdx = ref(0);
    const keyword = ref('');
    
    
    //Functions
    function createListItems() {
        for (let i = 0 ; i < 100; i++) {
            listItems.value.push({
                Text:'Item' + i,
                Index: i,
            });
        }
    }
    function searchListItem(){
        ... 
    }
    

    //Computed
    //예1) getter, setter 모두 사용
    const listHeight = computed({ 
        get(){ return ... }, 
        set(value) { ... }
    });
    //예2) getter만 사용
    const listStyle = computed(() => {
        return  ... ; 
    });
    
  
    //Lifecycle Hooks
    onMounted(() => {
      createListItems();
      window.addEventListener('click', searchListItem);
    });
    onUnmounted(() =>{
      window.removeEventListener('click', searchListItem);
    })
</script>