Angular React와 Vue의 비교-JS 튜토리얼-php.cn

프론트엔드 기술은 최근 몇 년 동안 빠르게 발전했습니다. 세분화하면

1.개발 언어 기술, 주로 ES6&7, 커피스크립트, 타이프스크립트 등
2.개발 프레임워크; Angular, React, Vue.js, Angular2 등
3.개발 도구 및 프런트엔드 엔지니어링 강화, Grunt, Gulp, Webpack, npm, eslint, mocha 등의 기술; 서버 측의 nodejs, express, koa, meteor, GraphQL, 모바일 측의 ionic, ReactNative, Weex 및 크로스 플랫폼( three.js 등)과 같은 프런트 엔드 개발 범위 확장; 컴퓨터 그래픽 및 3D 모델링 분야의 시각화 및 데이터 분석 d3.js 등 브라우저가 지속적으로 제공하는 svg, 캔버스, 블루투스, 배터리, 로컬 스토리지, 서비스 워커, Houdini 및 기타 새로운 API 기능과 WASM과 같은 기본 최적화 기술
개발 프레임워크에 관한 한 Angular(1&2), React 및 Vue가 현재 주류 위치를 차지하고 있으며 오랫동안 유지될 것입니다. 따라서 미래 기술 선택을 용이하게 하기 위해 이 세 가지 기술을 비교합니다.

一 데이터 흐름

데이터 바인딩

Angular는 양방향 바인딩을 사용합니다. 즉, 인터페이스 작업은 실시간으로 데이터에 반영되고 데이터 변경 사항은 실시간으로 인터페이스에 표시될 수 있습니다.

구현 원칙:

$scope변수는 더티 값 검사를 사용하여 구현됩니다. 예를 들어 ember.js는 setter와 getter의 관찰 메커니즘을 기반으로 합니다(

$scope.$watch 함수는 변수의 변경 사항을 모니터링합니다. 이 함수에는 "관찰할 내용", "변경 시 발생하는 내용", 변수 또는 개체를 모니터링할지 여부라는 세 가지 매개 변수가 있습니다.

$scope变量中使用脏值检查来实现。像ember.js是基于setter，getter的观测机制，

$scope.$watch函数，监视一个变量的变化。函数有三参数，”要观察什么”，”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。

使用ng-model时，你可以使用双向数据绑定。
使用$scope.$watch（视图到模型）以及$scope.$apply（模型到视图），还有$scope.$digest

调用$scope.$watchng-model을 사용하면 양방향 데이터 바인딩을 사용할 수 있습니다.

$scope.$watch를 사용하세요(다음에서 확인하세요) 모델) 및 $scope.$apply(모델 보려면) 및 $scope.$digest

$scope.$watch를 호출할 때 에는 하나의 매개변수만 전달되며 이 함수는 범위에 어떤 변화가 있어도 호출됩니다. ng-model에서는 모델과 뷰가 동기화되었는지 확인하는 데 사용됩니다. 동기화되지 않은 경우 모델 데이터를 새로운 값으로 업데이트합니다.

🎜양방향 바인딩의 세 가지 중요한 방법: 🎜🎜

$scope.$apply()

$scope.$digest()

$scope.$watch()

로그인 후 복사

AngularJS 양방향 바인딩에는 더티 체크, 다이제스트 루프라는 2가지 매우 중요한 개념이 있습니다. 더티 체크(더티 체크)는 바운드 범위에 있는 객체의 상태를 확인하는 데 사용됩니다. 예를 들어, 객체가 다이제스트 루프에 있도록 객체를 범위에 바인딩합니다. 루프는 이러한 객체가 변경되었는지 확인하기 위해 양방향 처리 방법을 호출합니다. 바인딩Vue

은 양방향 바인딩도 지원합니다.

기본값은 단방향 바인딩입니다. 데이터는 상위 구성 요소에서 하위 구성 요소로 한 방향으로 전달됩니다. 대규모 애플리케이션에서 단방향 바인딩을 사용하면 데이터 흐름을 쉽게 이해할 수 있습니다. 더티 감지의 장단점

ember.js 및 기타 기술의 getter/setter 관찰 메커니즘과 비교(우수): getter/setter DOM이 변경될 때마다 DOM이 수정됩니다. DOM 트리의 구조, 성능에 미치는 영향이 큽니다. Angular는 일괄 작업을 한 번만 업데이트하면 성능이 비교적 좋습니다.

Vue(열등)와 비교:

Vue.js는 성능이 더 좋고

더티 검사를 사용하지 않기 때문에

최적화하기가 매우 쉽습니다. Angular,

관찰자가 많아지면 점점 느려질 것입니다. 범위가 변경될 때마다 모든 관찰자를 다시 계산해야 하기 때문입니다 . 또한 일부 관찰자가 다른 업데이트를 트리거하는 경우 다이제스트 주기가 여러 번 실행되어야 할 수도 있습니다. Angular 사용자는 더티 체크 루프 문제를 해결하기 위해 난해한 기술을 사용하는 경우가 많습니다. 때로는 많은 수의 경우 최적화할 수 있는 쉬운 방법이 없습니다. 감시자의 범위. Vue.js에는 종속성 추적 및 비동기 대기열 업데이트를 기반으로 하는 관찰 시스템을 사용하기 때문에 이러한 문제가 전혀 없습니다. 모든 데이터 변경 사항은 독립적으로 트리거됩니다. 필요한 유일한 최적화는 v-for에서 추적을 사용하는 것입니다. React - 단방향 데이터 흐름

Angular와 Vue의 MVVM 흐름은 모두 템플릿과 유사한 구문을 사용하여 인터페이스 상태와 데이터 간의 바인딩 관계를 설명하고, 인터페이스가 변경되면 내부 변환을 통해 이 구조를 구축합니다. 구성 규칙에 따라 해당 데이터를 업데이트한 다음 구성된 규칙에 따라 데이터에서 인터페이스 상태를 업데이트합니다.

React는 함수형 프로그래밍과 단방향 데이터 흐름을 옹호합니다

: 원래 인터페이스(또는 데이터)가 주어지면 변경 사항을 적용하여 다른 상태(인터페이스 또는 데이터 업데이트)가 파생될 수 있습니다.

React와 Vue 모두 Redux와 협력하여 상태 데이터를 관리할 수 있습니다.

2 뷰 렌더링

Angular1

AngularJS의 작동 원리는 다음과 같습니다. HTML 템플릿은 브라우저에 의해 DOM으로 구문 분석되고 DOM 구조는 AngularJS 컴파일러의 입력이 됩니다. AngularJS는 DOM 템플릿을 탐색하여 해당 NG 명령어를 생성합니다. 모든 명령어는 뷰(즉, HTML의 ng-model)에 대한 데이터 바인딩 설정을 담당합니다. 따라서 NG 프레임워크는 DOM이 로드된 후에만 작동하기 시작합니다.

React

React의 렌더링은 메모리의 DOM 트리 상태를 설명하는 데이터 구조인 Virtual DOM을 기반으로 구축되었습니다. 상태가 변경되면 React는 Virtual DOM을 다시 렌더링하고 비교 및 계산을 거쳐 실제 DOM을 패치합니다.

Virtual DOM은 뷰를 설명하는 기능적 방법을 제공합니다. 데이터 관찰 메커니즘을 사용하지 않습니다. 각 업데이트는 전체 애플리케이션을 다시 렌더링하므로 정의에 따라 뷰와 데이터의 동기화가 보장됩니다. 이는 또한 JavaScript에서 동형 응용 프로그램의 가능성을 열어줍니다.

매우 많은 양의 데이터의

첫 화면 렌더링 속도와 관련하여 React에는 확실한 장점이 있습니다. 왜냐하면 Vue의 렌더링 메커니즘은 시작 시 수행할 작업이 더 많고React는 서버 측 렌더링을 지원하기 때문입니다 . React의

Virtual DOM도 최적화되어야 합니다

. 복잡한 애플리케이션에서는 1. 불필요한 vdom 재렌더링을 피하기 위해 shouldComponentUpdate를 수동으로 추가합니다. 2. 구성 요소에 대해 pureRenderMixin을 최대한 사용한 다음 Flux 구조 + Immutable.js를 사용합니다. 사실 그렇게 간단하지는 않습니다. 대조적으로 Vue는 종속성 추적을 채택하고 기본값은 최적화 상태입니다: 이동된 데이터의 양, 트리거된 업데이트의 수, 그 이상도 그 이하도 아닙니다. React와 Angular 2에는 모두 서버 측 렌더링과 기본 렌더링 기능이 있습니다.

Vue.js

는 가상 DOM을 사용하지 않지만 실제 DOM을 템플릿으로 사용하며 데이터는 실제 노드에 바인딩됩니다. Vue.js의 애플리케이션 환경은 DOM을 제공해야 합니다. Vue.js는 때때로 React**보다 더 나은 성능을 발휘하며 수동 최적화가 거의 필요하지 않습니다. 3 성능 및 최적화

성능 측면에서 이러한 주류 프레임워크는 가장 일반적인 시나리오의 성능 요구 사항을 쉽게 충족할 수 있어야 합니다. 차이점은 최적화 가능성과 최적화가 개발 경험에 미치는 영향에 있습니다. Vue의 경우 track-by를 추가해야 합니다. React에는 shouldComponentUpdate 또는 전체 Immutable이 필요하고 Angular 2에서는 변경 감지 전략을 수동으로 지정해야 합니다. 전반적인 추세에서

브라우저와 휴대폰은 계속해서 더 빠르게 변할 것입니다. 프레임워크 자체의 렌더링 성능은 전체 프런트엔드 성능 최적화 시스템에서 여전히 더 많은 최적화 지점이 있습니다. 이미지 로딩, 네트워크 링크, HTTP/2 등

4가지 모듈화 및 구성 요소화

Angular1 -> Angular2

Angular1은 종속성 주입을 사용하여 모듈 간의 종속성 문제를 해결합니다. 거의 모든 모듈은 주입 컨테이너 및 기타 관련 기능에 의존합니다. 비동기적으로 로드되지 않습니다. 첫 번째 로드에 필요한 모든 종속성은 종속성에 따라 나열됩니다.

비동기 로딩을 달성하기 위해 Require.js와 같은 것과 함께 사용할 수 있습니다. 지연 로딩(주문형 로딩)은 ocLazyLoad의 도움을 받는 솔루션이지만 이상적으로는 로컬 프레임워크가 이해하기 더 쉽습니다.

Angular2는 ES6 모듈을 사용하여 모듈을 정의하고 동적 로딩의 필요성도 고려합니다.

Vue

Vue의 명령어와 구성요소가 더욱 명확하게 구분됩니다. 지시문은 DOM 작업 만 캡슐화하는 반면 구성 요소는 자체 뷰와 데이터 논리**를 갖춘 자급자족 독립 단위를 나타냅니다. Angular1에서는 둘 사이에 많은 혼란이 있습니다.

React

A React 애플리케이션은 React 구성 요소를 기반으로 구축되었습니다.
구성 요소에는 props와 state라는 두 가지 핵심 개념이 있습니다.
컴포넌트는 이 두 속성의 값을 통해 render 메소드에서 이 컴포넌트에 해당하는 HTML 구조를 생성합니다.

기존 MVC는 스크립트 태그나 템플릿 파일과 같은 다른 위치에 템플릿을 배치한 다음 어떤 수단을 통해 JS에서 템플릿을 참조합니다. 그런 맥락에서 우리가 여기저기 흩어져 있는 템플릿 조각들에 얼마나 많이 압도당했는지 생각해 보세요. 템플릿 엔진, 템플릿 저장 위치, 템플릿 참조 방법에 대해 혼란스럽습니다.

React는 구성 요소가 왕이고 구성 요소가 템플릿과 밀접하게 관련되어 있다고 믿습니다. 구성 요소 템플릿과 구성 요소 로직이 분리되어 문제가 복잡해집니다. 그래서 HTML 템플릿을 JS 코드에 직접 삽입하여 템플릿과 구성 요소를 연관시킬 수 있는 JSX 구문이 있습니다. 그러나 JS는 HTML이 포함된 이 구문을 지원하지 않으므로 도구를 통해 JSX를 삽입하려면 필요합니다. JS 코드로 컴파일하여 출력한 후에만 사용할 수 있습니다(크로스 플랫폼 개발의 기반으로 사용할 수 있으며, 서로 다른 인터프리터를 통해 서로 다른 플랫폼에서 실행되는 코드로 해석되므로 RN 및 React를 사용하여 데스크톱 개발이 가능함) 고객) .

5 구문 및 코딩 스타일

React, Vue 및 Angular2는 모두 ES6를 지원하며 Angular2는 공식적으로 TypeScript의 JavaScript 스타일을 수용합니다.

React는 JavaScript 중심이지만 Angular 2는 여전히 HTML 중심입니다. Angular 2는 "JS"를 HTML에 포함합니다. React는 "HTML"을 JS에 포함시킵니다. Angular 2는 HTML을 더욱 강력하게 만들려는 Angular 1의 접근 방식을 따릅니다.

React에 권장되는 접근 방식은 JSX + 인라인 스타일입니다. 이는 HTML과 CSS를 JavaScript에 통합하는 것을 의미합니다. Vue의 기본 API는 간단하고 사용하기 쉬운 것을 목표로 하지만 고급 이후에는 webpack + vue-loader의 단일 파일 컴포넌트 형식을 사용하는 것이 좋습니다 (템플릿, 스크립트, 스타일이 컴포넌트로 vue 파일에 작성됩니다)

위 내용은 Angular React와 Vue의 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!