전단 프레임 워 크 학습 총화 의 Angular,React 와 Vue 의 비교 상세 한 해석

최근 몇 년 전의 기술 발전 이 매우 빠 르 고 세분 화 하면 주로 네 가지 측면 으로 나 눌 수 있다.
      1.언어 기술 을 개발 하 는데 주로 ES6&7,coffeescript,typescript 등 이다.
      2.Angular,React,Vue.js,Angular 2 등 개발 프레임 워 크;
      3.개발 도구 의 풍부 함 과 전단 공정 화,예 를 들 어 Grunt,Gulp,Webpack,npm,eslint,mocha 등 기술;
      4.서버 의 nodejs,express,koa,meter,GrapQL 등 전단 개발 범위 의 확장;모 바 일 엔 드 와 크로스 플랫폼 의 Phone Gap,ionic,ReactNative,Weex;컴퓨터 그래 픽 과 3 차원 모델 링 분야 의 WebGL(three.js 등);시각 화 와 데이터 분석 분야 의 d3.js 등;브 라 우 저가 끊임없이 개방 하 는 더 많은 새로운 기능 과 인터페이스,예 를 들 어 svg,canvas,블 루 투 스,배터리,로 컬 저장 소,service worker,Houdini 등 새로운 API 능력 과 WASM 과 같은 밑바닥 최적화 기술 을 포함한다.
개발 프레임 워 크 인 Angular(1&2),React,Vue 는 현재 주류 위 치 를 차지 하고 있 으 며 비교적 긴 시간 을 유지 할 것 이 므 로 이 세 가지 기술 을 비교 하여 향후 기술 선택 을 할 수 있 도록 한다.
데이터 흐름
데이터 바 인 딩
Angular 는 양 방향 바 인 딩 을 사용 합 니 다.즉,인터페이스의 조작 은 실시 간 으로 데 이 터 를 반영 할 수 있 고 데이터 의 변경 은 실시 간 으로 인터페이스 에 나타 날 수 있 습 니 다.
실현 원리:
$scope 변수 에서 더러 운 값 검 사 를 사용 합 니 다.ember.js 는 setter,getter 의 관측 체 제 를 바탕 으로 합 니 다.$scope.$watch함수,변수의 변 화 를 감시 합 니 다.함수 에는 세 가지 인자 가 있 습 니 다."무엇 을 관찰 해 야 합 니까?"변화 할 때 무슨 일이 일어 날 지",그리고 당신 이 감시 해 야 할 변 수 는 하나의 대상 입 니까?
ng-model 을 사용 할 때 양 방향 데이터 로 연결 할 수 있 습 니 다.
사용$scope.$watch(보기 에서 모델 까지)및$scope.$apply(모델 에서 보기 까지),그리고$scope.$digest호출$scope.$watch시 하나의 매개 변수 만 전 달 했 습 니 다.역할 영역 에서 어떤 것 이 변화 하 든 이 함수 가 호출 됩 니 다.ng-model 에서 이 함 수 는 모델 과 보기 가 동기 화 되 었 는 지 확인 하 는 데 사 용 됩 니 다.동기 화 되 지 않 으 면 새 값 으로 모델 데 이 터 를 업데이트 합 니 다.
양 방향 연결 의 세 가지 중요 한 방법:

$scope.$apply()

$scope.$digest()

$scope.$watch()

AngularJS 양 방향 바 인 딩 에서 두 가지 중요 한 개념 은 dirty check,digest loop,dirty check(더러 운 검 측)은 바 인 딩 된 scope 의 대상 상 태 를 검사 하 는 데 사용 된다.예 를 들 어 js 에서 대상 을 만 들 고 이 대상 을 scope 에 연결 하면 이 대상 은 digest loop 에 있다.loop 은 이 대상 들 을 옮 겨 다 니 며 그들 이 변 했 는 지 여 부 를 발견 합 니 다.변 하면 해당 하 는 처리 방법 으로 양 방향 연결 을 실현 합 니 다.
Vue 도 양 방향 바 인 딩 을 지원 합 니 다.기본 값 은 단 방향 바 인 딩 입 니 다.데 이 터 는 부모 구성 요소 에서 하위 구성 요소 로 전 달 됩 니 다.대형 응용 프로그램 에서 단 방향 바 인 딩 을 사용 하여 데이터 흐름 을 쉽게 이해 할 수 있 습 니 다.
더러 운 검사 의 장단 점
ember.js 등 기술 의 getter/setter 관측 메커니즘 에 비해(우):
getter/setter 는 DOM 에 변경 이 생 길 때마다 DOM 트 리 의 구 조 를 수정 해 야 합 니 다.성능 의 영향 이 크 고 Angular 는 일괄 작업 을 한 번 에 업데이트 하 는 것 으로 지연 시 켜 성능 이 상대 적 으로 좋 습 니 다.
Vue 에 비해(열):
Vue.js 는 더 좋 은 성능 을 가지 고 있 으 며 더러 운 검 사 를 사용 하지 않 기 때문에 최적화 하기 쉽다.Angular,watcher 가 점점 많아 질 때 점점 느 려 집 니 다.역할 영역 내의 모든 변화 로 인해 모든 watcher 는 다시 계산 해 야 합 니 다.또한,일부 watcher 가 다른 업 데 이 트 를 촉발 하면 더러 운 검사 순환(digest cycle)이 여러 번 실 행 될 수 있 습 니 다.Angular 사용 자 는 종종 더러 운 검사 순환 문 제 를 해결 하기 위해 심오 한 기술 을 사용 해 야 한다.대량의 watcher 의 역할 영역 을 최적화 하 는 간단 한 방법 이 없 을 때 도 있다.Vue.js 는 추적 에 의존 하 는 관찰 시스템 을 사용 하고 비동기 적 으로 업 데 이 트 를 하기 때문에 모든 데이터 변 화 는 명확 한 의존 관 계 를 가지 지 않 는 한 독립 적 으로 촉발 된다.유일 하 게 해 야 할 최 적 화 는 v-for 에서 track-by 를 사용 하 는 것 이다.
React-단 방향 데이터 흐름
MVVM 흐름 의 Angular 와 Vue 는 모두 템 플 릿 과 유사 한 문법 을 통 해 인터페이스 상태 와 데이터 의 연결 관 계 를 설명 한 다음 에 내부 전환 을 통 해 이 구 조 를 구축 하고 인터페이스 가 변화 할 때 설정 규칙 에 따라 해당 하 는 데 이 터 를 업데이트 한 다음 에 설 정 된 규칙 에 따라 데이터 에서 인터페이스 상 태 를 업데이트 합 니 다.
React 는 함수 식 프로 그래 밍 과 단 방향 데이터 흐름 을 추앙 합 니 다.원본 인터페이스(또는 데이터)를 지정 하고 변 화 를 가 하면 다른 상태(인터페이스 또는 데이터 업데이트)를 유도 할 수 있 습 니 다.
React 와 Vue 는 모두 Redux 와 결합 하여 상태 데 이 터 를 관리 할 수 있 습 니 다.
2.보기 렌 더 링
Angular1
AngularJS 의 작업 원 리 는 HTML 템 플 릿 이 브 라 우 저 에 의 해 DOM 으로 해석 되 고 DOM 구 조 는 AngularJS 컴 파일 러 의 입력 이 된다 는 것 이다.AngularJS 는 DOM 템 플 릿 을 옮 겨 다 니 며 해당 하 는 NG 명령 을 생 성 합 니 다.모든 명령 은 view(즉 HTML 의 ng-model)에 대해 데이터 바 인 딩 을 설정 합 니 다.따라서 NG 프레임 워 크 는 DOM 로드 가 완 료 된 뒤에 야 작 동 하기 시작 했다.
React
React 의 렌 더 링 은 Virtual DOM 에 세 워 졌 습 니 다.메모리 에서 DOM 트 리 상 태 를 설명 하 는 데이터 구조 입 니 다.상태 가 바 뀌 었 을 때 React 는 Virtual DOM 을 다시 렌 더 링 하고 비교 계산 한 후에 실제 DOM 에 패 치 를 합 니 다.
Virtual DOM 은 함수 식 방법 으로 보 기 를 설명 합 니 다.데이터 관찰 체 제 를 사용 하지 않 고 업데이트 할 때마다 전체 응용 을 다시 렌 더 링 하기 때문에 정의 적 으로 보기 와 데이터 의 동기 화 를 보장 합 니 다.그것 도 자 바스 크 립 트 동구 응용의 가능성 을 열 었 다.
대량의 데이터 의 첫 화면 렌 더 링 속도 에 있어 React 는 어느 정도 장점 이 있 습 니 다.Vue 의 렌 더 링 메커니즘 이 시 작 될 때 해 야 할 일이 많 고 React 는 서버 렌 더 링 을 지원 하기 때 문 입 니 다.
React 의 Virtual DOM 도 최적화 가 필요 하 다.복잡 한 응용 프로그램 에서 1.필요 하지 않 은 vdom re-render 를 피하 기 위해 shouldComponent Update 를 수 동 으로 추가 할 수 있 습 니 다.2.Components 는 가능 한 한 PureRender Mixin 을 사용 한 다음 에 Flux 구조+Immutable.js 를 사용 합 니 다.사실 그리 간단 하지 도 않다.이에 비해 Vue 는 추적 에 의존 하기 때문에 기본적으로 최적화 상태 입 니 다.데 이 터 를 움 직 이 는 만큼 업 데 이 트 를 촉발 하고 많 지 않 아 도 적지 않 습 니 다.
React 와 Angular 2 는 서버 렌 더 링 과 네 이 티 브 렌 더 링 기능 이 있 습 니 다.
Vue.js 는 Virtual DOM 대신 실제 DOM 을 템 플 릿 으로 사용 하고 데 이 터 를 실제 노드 에 연결 합 니 다.Vue.js 의 응용 환경 은 DOM 을 제공 해 야 합 니 다.Vue.js 는 React 보다 성능 이 좋 을 때 도 있 고 손 으로 최적화 하지 않 아 도 됩 니 다.
3.성능 과 최적화
성능 에 있어 이 몇 가지 주류 구 조 는 대부분 흔히 볼 수 있 는 장면 의 성능 수 요 를 쉽게 대처 할 수 있어 야 한다.차이 점 은 최적화 성과 최적화 가 개발 체험 에 미 친 영향 이다.Vue 는 track-by 를 잘 넣 어야 돼 요.React 는 shouldComponentUpdate 나 전면적 인 Immutable 이 필요 하 며,Angular 2 는 change detection strategy 를 수 동 으로 지정 해 야 합 니 다.전체적인 추세 에서 볼 때 브 라 우 저 와 핸드폰 은 점점 빨 라 질 것 이다.프레임 자체 의 렌 더 링 성능 은 전체 전단 성능 최적화 시스템 에서 점점 약화 되 고 더 많은 최적화 점 은 구축 방식,캐 시,이미지 로드,네트워크 링크,HTTP/2 등 분야 이다.
4.모듈 화 와 구성 요소 화
Angular1 -> Angular2
Angular 1 은 의존 주입 을 사용 하여 모듈 간 의 의존 문 제 를 해결 하고 모듈 은 거의 주입 용기 및 기타 관련 기능 에 의존한다.비동기 로 불 러 오 는 것 이 아 닙 니 다.의존 목록 에 따라 첫 번 째 로 불 러 오 는 데 필요 한 모든 의존 도 를 표시 합 니 다.
Require.js 와 유사 한 비동기 로 딩 을 실현 할 수 있 습 니 다.게 으 른 로 딩(필요 에 따라 로 딩)은 ocLazy Load 방식 의 해결 방안 을 통 해 이 루어 집 니 다.그러나 이상 적 인 상황 에서 로 컬 프레임 워 크 가 더 쉽게 이해 할 수 있 을 것 입 니 다.
Angular 2 는 ES6 의 module 을 사용 하여 모듈 을 정의 하고 동적 로 딩 수요 도 고려 했다.
Vue
Vue 에 서 는 명령 과 구성 요소 가 더 선명 하 게 나 뉜 다.명령 은 DOM 작업 만 패키지 하고 구성 요 소 는 자급자족 의 독립 단원 인 자신의 보기 와 데이터 논리**를 대표 합 니 다.Angular 1 에 서 는 둘 이 섞 인 부분 이 많다.
React
React 응용 프로그램 은 React 구성 요소 위 에 구 축 된 것 입 니 다.
구성 요 소 는 두 가지 핵심 개념 이 있 습 니 다:props,state.
하나의 구성 요 소 는 이 두 속성의 값 을 통 해 render 방법 에서 이 구성 요소 에 대응 하 는 HTML 구 조 를 생 성 하 는 것 입 니 다.
전통 적 인 MVC 는 템 플 릿 을 다른 곳 에 두 는 것 입 니 다.예 를 들 어 script 태그 나 템 플 릿 파일 등 은 JS 에서 특정한 수단 으로 템 플 릿 을 참조 합 니 다.이런 생각 에 따라 우 리 는 사방 에 분 산 된 템 플 릿 부분 에 대해 얼마나 당 황 스 러 웠 는 지 생각해 보 자.템 플 릿 엔진 을 꼬 집 고 템 플 릿 저장 위 치 를 꼬 집 으 며 템 플 릿 을 어떻게 인용 하 는 지 꼬 집 습 니 다.
React 는 구성 요소 가 왕도 라 고 생각 합 니 다.구성 요 소 는 템 플 릿 과 밀접 한 관 계 를 가지 고 있 습 니 다.구성 요소 템 플 릿 과 구성 요소 논리 분 리 는 문 제 를 복잡 하 게 만 들 었 습 니 다.그래서 JSX 라 는 문법 이 생 겼 습 니 다.바로 HTML 템 플 릿 을 JS 코드 에 직접 삽입 하기 위해 서 입 니 다.그러면 템 플 릿 과 구성 요소 가 연 결 됩 니 다.그러나 JS 는 이러한 HTML 을 포함 하 는 문법 을 지원 하지 않 기 때문에 도 구 를 통 해 JSX 를 JS 코드 로 컴 파일 하여 출력 해 야 사용 할 수 있 습 니 다.서로 다른 해석 기 를 통 해 서로 다른 플랫폼 에서 실행 되 는 코드 로 해석 하면 RN 과 React 가 데스크 톱 클 라 이언 트 를 개발 할 수 있 습 니 다).
5.문법 과 코드 스타일
React,Vue,Angular 2 는 모두 ES6 를 지지 하고 Angular 2 는 TypeScript 라 는 JavaScript 스타일 을 공식 적 으로 포옹 했다.
React 는 자 바스 크 립 트 를 중심 으로 하 며,Angular 2 는 여전히 HTML 중심 으로 유지 된다.Angular 2 는"JS"를 HTML 에 삽입 합 니 다.React 는'HTML'을 JS 에 삽입 합 니 다.Angular 2 는 Angular 1 이 HTML 을 더욱 강하 게 만 들 려 는 방식 을 사용 했다.
React 가 추천 하 는 방법 은 JSX+inline style 입 니 다.즉,HTML 과 CSS 를 모두 자 바스 크 립 트 에 넣 었 습 니 다.Vue 의 기본 API 는 간단 하고 손 쉽게 시작 하 는 것 을 목표 로 하지만,진급 후 웹 팩+vue-loader 를 사용 하 는 단일 파일 구성 요소 형식(template,script,style 은 vue 파일 에 하나의 구성 요소 로 쓰 임)을 추천 합 니 다.
총결산
자,이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 화 제 는 실제 적 으로 매우 큽 니 다.Angular,React 와 Vue 세 가지 기술 에 대해 깊이 이해 해 야 하기 때문에 정리 가 불완전 하거나 깊이 가 없 는 부분 이 많 을 수 밖 에 없습니다.나중에 저 는 계속 보완 하고 수정 하 겠 습 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.