Vue 학습

2장. Vue 작동 방식: 기본 사항

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

이전 장에서는 Vue 애플리케이션을 구축하는 데 필수적인 도구를 배우고 첫 번째 Vue 애플리케이션을 생성하여 다음 단계인 Vue 코드 작성을 통한 Vue 작동 방식 학습을 준비했습니다.

이 장에서는 가상 DOM(가상 문서 객체 모델)의 개념과 Vue 옵션 API를 사용한 Vue 컴포넌트 작성의 기초를 소개합니다. 또한 추가 Vue 지시어와 Vue 반응성 메커니즘에 대해서도 살펴봅니다. 이 장이 끝나면 Vue의 작동 방식을 이해하고 애플리케이션에서 사용할 Vue 컴포넌트를 작성하고 등록할 수 있게 됩니다.

가상 DOM 내부

Vue는 DOM(문서 객체 모델)과 직접 작동하지 않습니다. 대신 가상 DOM을 구현하여 런타임에 애플리케이션의 성능을 최적화합니다.

가상 DOM의 작동 방식에 대한 확실한 이해를 돕기 위해 먼저 DOM의 개념부터 살펴봅니다.

DOM은 웹에서 HTML(또는 XML) 문서 콘텐츠를 인메모리 트리와 같은 데이터 구조의 형태로 나타냅니다( 그림 2-1 참조). 웹 페이지와 실제 프로그래밍 코드(예: JavaScript)를 연결하는 프로그래밍 인터페이스 역할을 합니다. HTML 문서에서 <div> 또는 <section> 과 같은 태그는 프로그래밍 노드 및 객체 로 표현됩니다.

그림 2-1. DOM 트리의 예

브라우저가 HTML 문서를 파싱한 후 DOM을 즉시 상호작용에 사용할 수 있습니다. 레이아웃이 변경되면 브라우저는 백그라운드에서 DOM을 지속적으로 페인팅하고 다시 칠합니다. 이 프로세스를 파싱이라고 하고, DOM 화면 래스터화 또는 픽셀 대 화면 파이프라인을 페인팅이라고 합니다. 그림 2-2는 래스터화가 어떻게 작동하는지 보여줍니다:

그림 2-2. 브라우저 래스터화 프로세스

레이아웃 업데이트 문제

각 페인트는 브라우저의 성능에 많은 비용이 듭니다. DOM은 많은 노드로 구성될 수 있으므로 단일 또는 여러 노드를 쿼리하고 업데이트하는 데 많은비용이 들 수 있습니다.

다음은 DOM에 있는 li 요소 목록의 간단한 예시입니다:

<ul class="list" id="todo-list">
  <li class="list-item">To do item 1</li>
  <li class="list-item">To do item 2</li>
  <!--so on…-->
</ul>

li 요소를 추가/제거하거나 콘텐츠를 수정하려면 document.getElementById (또는 document.getElementsByClassName ...