클래식하고 사용하기 쉬운 JavaScript 프레임워크 Vue.js 소개

이 글의 목적은 유용한 JavaScript 프레임워크 Vue.js를 소개하여 독자들이 이에 대한 사전 이해를 가질 수 있도록 하는 것입니다.

Vue란 무엇인가요

Vue(/vjuː/로 발음, view와 유사)는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 다른 대형 프레임워크와 달리 Vue는 아래에서 위로 레이어별로 적용되도록 설계되었습니다. Vue의 핵심 라이브러리는 시작하기 쉬울 뿐만 아니라 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합할 수 있는 뷰 레이어에만 중점을 둡니다. 반면에 최신 도구 체인 및 다양한 지원 라이브러리와 결합하면 Vue는 복잡한 단일 페이지 애플리케이션을 위한 드라이버를 완벽하게 제공할 수 있습니다.

Vue의 기능 - 계산된 속성

Vue 템플릿에 표현식을 작성하는 것은 매우 편리하지만 복잡한 로직을 넣으면 템플릿이 부피가 커지고 유지 관리가 어려워집니다. 복잡한 로직의 경우 Vue에서는 이를 해결하기 위해 계산된 속성을 제공합니다.

으아악

다음은 계산된 속성의 기본 예입니다.

으아악

여기서 계산 속성 reversedMessage가 선언되며, 계산에서 제공하는 함수는 vm.reversedMessage 속성의 값으로 사용됩니다. 그리고 vm.message가 변경되면 vm.reversedMessage도 그에 따라 변경되며, 이와 관련된 다른 속성이 있으면 그에 따라 변경됩니다.

Vue의 메서드 및 계산된 속성

실제로 이 방법을 사용하면 이와 비슷한 효과를 얻을 수 있습니다.

으아악

이와 같이 동일한 결과를 얻을 수 있지만 계산된 속성과의 차이점은 메시지가 변경되지 않는 한 계산된 속성은 함수를 실행하지 않고 메서드가 필요한 동안 이전 결과를 직접 반환한다는 것입니다. 기능을 반복적으로 실행합니다. 캐싱이 필요하지 않은 경우 메서드를 사용하세요.

Vuex, Vue의 핵심 플러그인

먼저 질문에 답해 보겠습니다. Vuex가 무엇인가요?

Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 패턴입니다. 중앙 집중식 저장소를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다. Vuex는 Vue의 공식 디버깅 도구 devtools 확장에도 통합되어 제로 구성 시간 이동 디버깅, 상태 스냅샷 가져오기 및 내보내기 등과 같은 고급 디버깅 기능을 제공합니다.

Vuex 상태 관리 기본 아이디어

컴포넌트의 공유 상태를 추출하여 글로벌 싱글톤 모드로 관리합니다. 이 모드에서는 구성 요소 트리가 거대한 "뷰"를 형성합니다. 트리의 어느 위치에 있든 모든 구성 요소는 상태를 얻거나 동작을 트리거할 수 있습니다

또한 격리 상태 관리에서 다양한 개념을 정의하고 특정 규칙을 적용함으로써 코드가 더욱 구조화되고 유지 관리가 쉬워집니다.

이 아이디어는 Flux, Redux 및 The Elm Architecture에서 차용했습니다. 다른 패턴과 달리 Vuex는 효율적인 상태 업데이트를 위해 Vue.js의 세분화된 데이터 응답 메커니즘을 활용하도록 Vue.js용으로 특별히 설계된 상태 관리 라이브러리입니다.

Vuex는 언제 사용해야 하나요?

Vuex는 공유 상태를 관리하는 데 도움이 될 수 있지만 더 많은 개념과 프레임워크도 함께 제공됩니다. 이를 위해서는 단기 및 장기 이익의 저울질이 필요합니다.

대규모 단일 페이지 애플리케이션을 개발할 계획이 없다면 Vuex를 사용하는 것은 번거롭고 중복될 수 있습니다. 사실입니다. 애플리케이션이 충분히 단순하다면 Vuex를 사용하지 않는 것이 좋습니다. 간단한 글로벌 이벤트 버스로 충분합니다. 그러나 중대형 단일 페이지 애플리케이션을 구축해야 하는 경우 구성 요소 외부에서 상태를 더 잘 관리하는 방법을 고려할 것이며 Vuex가 자연스러운 선택이 될 것입니다.

Vue와 기타 플러그인 비교

비교를 위해 React를 예로 들어보겠습니다. 우선 둘 다 많은 유사점을 가지고 있습니다.

가상 DOM 사용
반응형(반응형) 및 구성 요소화된(컴포저블) 뷰 구성 요소를 제공합니다.
핵심 라이브러리에 초점을 맞추고 라우팅 및 전역 상태 관리와 같은 다른 기능은 관련 라이브러리에 맡깁니다.

런타임 공연

React 애플리케이션에서는 구성 요소의 상태가 변경되면 해당 구성 요소를 루트로 하여 전체 구성 요소 하위 트리를 다시 렌더링합니다.

Vue 애플리케이션에서는 렌더링 프로세스 중에 구성 요소 종속성이 자동으로 추적되므로 시스템은 실제로 다시 렌더링해야 하는 구성 요소가 무엇인지 정확하게 알 수 있습니다. 모든 컴포넌트가 자동으로 shouldComponentUpdate를 획득했으며 위에서 언급한 하위 트리 문제에는 제한이 없다는 것을 이해할 수 있습니다.

Vue의 이 기능을 사용하면 개발자가 이러한 최적화를 고려할 필요가 없으며 애플리케이션 자체에 더 집중할 수 있습니다.

웹 프로그램 소개

React에서는 모든 것이 JavaScript입니다. JSX를 사용하여 HTML을 표현할 수 있을 뿐만 아니라 처리를 위해 CSS를 JavaScript에 통합하는 추세가 점점 더 늘어나고 있습니다. 이러한 유형의 접근 방식에는 장점이 있지만 모든 개발자가 만족하지 못하는 장단점도 있습니다. React에서 모든 구성 요소 렌더링 기능은 JSX에 의존합니다. JSX는 XML 구문을 사용하여 JavaScript를 작성하는 도구입니다.

Vue의 전체 아이디어는 고전적인 웹 기술을 수용하고 확장하는 것입니다. 실제로 Vue는 렌더링 기능도 제공하고 JSX도 지원합니다. 그러나 기본 권장 사항은 템플릿입니다. 유효한 HTML은 유효한 Vue 템플릿입니다. HTML에 익숙한 많은 개발자에게는 템플릿이 JSX보다 읽고 쓰기에 더 자연스럽습니다. 물론 여기에는 주관적인 선호의 요소가 있지만, 이 차이가 개발 효율성의 향상으로 이어진다면 객관적인 가치가 있는 것입니다.

규모

Vue와 React는 모두 대규모 애플리케이션을 처리할 수 있는 강력한 라우팅을 제공합니다. React 커뮤니티는 상태 관리(예: Flux, Redux)에서 매우 혁신적이며 이러한 상태 관리 패턴은 물론 Redux 자체도 Vue 애플리케이션에 쉽게 통합될 수 있습니다. 실제로 Vue는 이 모델(Vuex)을 한 단계 더 발전시켜 Vue의 상태 관리 솔루션인 Vuex를 더욱 깊이 통합하여 더 나은 개발 경험을 제공할 수 있다고 믿습니다.

둘 사이의 또 다른 중요한 차이점은 Vue의 라우팅 라이브러리와 상태 관리 라이브러리가 공식적으로 유지 관리되고 지원되며 핵심 라이브러리와 동시에 업데이트된다는 것입니다. React는 이러한 문제를 커뮤니티에 맡기기로 선택하여 보다 분산된 생태계를 만듭니다. 하지만 상대적으로 React의 생태계는 Vue보다 더 번영합니다.

React와 Vue 사이에는 다른 차이점이 있는데, 여기서는 자세히 다루지 않겠습니다. 물론 어떤 것을 선택할지는 사용자에 따라 다를 수 있습니다. 현재 우리가 하는 일은 편의를 위한 몇 가지 제안일 뿐입니다. 사용자는 Vue에 대해 더 잘 이해하고 Vue가 다른 플러그인과 어떻게 다른지 더 잘 이해하게 되었습니다.

위 내용은 클래식하고 사용하기 쉬운 JavaScript 프레임워크 Vue.js 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!