Can I use ... Vue 3? (컨퍼런스 발표 내용)

개요

Can I use ... Vue3 의 컨퍼런스를 시청하고 메모해두고 싶은 내용들을 정리해 보았다.

 

Vue 3 의 특징

• 강화된 타입스크립트 지원
• 코드 재사용을 위한 Composition API(Optional 써도되고 안써도되고)
• 그외 https://heewon26.tistory.com/258 참고

실무자의 관점의 Vue 3

이미 운영중인 서비스와 IE가 필요한 사이트는 Vue2로(IE는 2022년 6월 서비스 종료)

 

입문자의 고민

Vue2로 배워도 문제 없다

 

실무자의 고민

Vue 3를 써보고 싶은데,,,ㅠ 어떻게 해야 하나요?

Vue 2의 @vue/composition-api + Typescript를 써보자

 

@vue/composition-api 란?

• Vue 2에서 컴포넌트의 재사용 가능 로직을 작성할 수 있도록 도와주는 라이브러리
• 함수 기반의 API 작성 방식 기능으로 타입스크립트 추론 이점 극대화
• 데이터, 로직 목적별로 관심사 분리 가능
• 리액트 훅의 방식을 채택하여 뒤늦게 나온 만큼 몇 가지 단점을 보완
  • 분기문, 반복문 중첩 함수 내에서 사용가능
  • 컴포넌트 생성 주기에 따라 최초에 한번만 실행

함수 기반의 API 작성 방식 기능(확실히 상당한 이점을 느낀부분 믹스인을 갖다 버릴수 있겠다)

composable/useModal.js

import { ref } from '@vue/composition-api'

const useModal = () => {
  const isModalOpen = ref(false)
  const openModal = () => {
    isModalOpen.value = true
  }
  return {
    isModalOpen
    openModal
  }
}

App.vue

<template>
  <form @submit.prevent="submitForm">
    <input type="text">
    <button type="submit">Login</button>
    <p>modal is {{ isModalOpen ? 'open' : 'closed' }}</p>
  </form>
</template>

<script>
import * as useModal from './composable/useModal.js'

export default {
  setup() {
    return { ...useModal() }
  }
  methods: 
    async submitForm() {
      // await loginUser();
      this.openModal();
    },
  }
}
</script>

@vue/composition-api 사용시 주의 사항

• 기존의 믹스인과 HOC를 이용한 코드 재활용 방식은 가급적 지양(위와 같이 composable처럼 작성하는걸 지향)
• 타입스크립트와 같이 사용했을 때 효과 상승
  • 훅에서 정의한 파일을 컴포넌트 안에서 재선언 했을 때 덮어쓰는 실수를 피할 수 있음
• reactive 보다는 ref 지향 (객체에 nested 하는 형태로 reative를 사용하는 데 이게 디버깅이 어렵다?)
• Vue 3에서 제공되는 API가 모두 지원되지는 않음

Vue 2의 타입스크립트 지원

• 클래스 문법보다는 Vue.extend()를 이용한 객체 문법 지향
• TS 설정 파일에 noImplicitThis: true 옵션 추가
• computed 속성 반환 타입은 꼭 정의
• 스토어 및 기타 타입 정의는 d.ts 파일에 정의

Vue 3 언제 쓰면 좋을까?

• 코어 및 커뮤니티 라이브러리 생태계가 충분히 성숙해 졌을 때
• 아마다 IE 지원이 끝나는 2022년 하반기 이후
• 사용자 층과 브라우저를 선택할 수 있는 어드민(internal site)을 개발할 때

발표자료 만들때 활용하면 좋을꺼같은?

https://sli.dev/guide/

Slidev