vue 3.0 reference 공부

2022. 03. 02.

Introduction

vue란? javascript UI 빌드용 프레임워크.

• HTML, CSS, Javascript에 기반해 있다.
• 선언형(declarative) 프로그래밍 : 어떻게 흘러가는지에 초점을 둔다. 약속된 정의만 사용
  ex) HTML, XML, CSS, SQL 등...
  <-> 명령형(imperative) : 어떻게 동작하는지에 초점을 둔다. 상태와 제어흐름을 중시
  ex) C, C++, Java 등..
• 컴포넌트 기반의 프로그래밍 모델 : 독립적인 기능을 제공하는 단위 소프트웨어 모듈로 개발하는 것.
  특징) 재사용성과 대체성

core features

• Declarative Rendering : javascript를 기반으로 한 HTML 선언으로 랜더링한다.
• Reactivity : javascript 상태가 변화하면 바로 DOM을 업데이트한다.

Progressive Framework

: Vue는 많은 기능을 가진 프론트엔드 개발 프레임워크와 생태계를 지니고 있다. 하지만 웹은 형태나 크기가 다양하다. 그래서 Vue는 유연하게 설계되었다.

• 노 빌드 static HTML
• 다른 페이지에 web component로 임베디드하기
• Single-Page Application(SPA)
• Fullstack/Server-Side-Rendering(SSR) : 요청에 따라 HTML 문서를 서버에서 생성 반환
• JAMStack/Static-Site-Gerneration(SSG) : 빌드 타임에 생성 후 서버에 요청 시 HTML 문서반환
• desktop, mobile, WebGL 등..

Single-File Components

: .vue 파일은 component logic(JavaScript), template(HTML), styles(CSS)를 단일 파일에 존재한다.

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

API Styles

: Vue component에서는 Options API와 Composition API 두가지 선택할 수 있다.

Options API

: script에서 사용할 수 있다. data, methods, mounted이 있으며, this로 함수내에서 정의할 수 있다.

Composition API

: script setup으로 변경한 후에 사용 가능하다.

둘 중 무엇을 선택할까? 인터페이스적 차이가 있을 뿐 기능에 있어서 차이가 있지 않다. 다만 Options API는 Composition API 위에 구현되어 있다.

Options API는 OOP 언어 기반인 component instance의 개념에 위치해 있다. reactivity 세부 사항을 추상화 하고 Options 그룹을 통해 코드를 구성하여 초보자들에게 친숙하다. 빌드 툴을 사용하지 않거나 App이 덜 복잡한 경우에 사용

Composition API은 함수 범위 내에서 직접적인 선언형 상태 변수에 중심을 둔다. 그리고 복잡성을 처리하기 위해 여러기능의 상태를 함께 구성한다. 조금 더 자유로운 형식이며, 효율적인 사용을 위해서는 vue에서 reactivity가 어떻게 작동하는지 이해할 필요가 있다. 유연성은 구조화와 재사용에 있어서 조금 더 파워가 있다. Vue로 App전체를 빌드할 경우