면접 문제:react 와 vue 의 차이 분석

react 와 vue 는 무엇 입 니까?뭐 가 달라 요?
세 가지 틀 중 하 나 는 모두 가 낯 설 지 않 고 배 웠 거나 개발 에 사용 되 었 을 것 이다.
하지만 그들 은 어떤 차이 가 있 을 까?이것 이 바로 우리 이 문장 이 탐구 하고 배 워 야 할 것 이다.
시작!
MVC 와 MVVM
우선 이 자모 들 이 대표 하 는 의 미 를 밝 혀 보 자.

M:모델 모델

V:보기

C:컨트롤 러 컨트롤 러

VM:ViewModel 보기 모델

먼저 MVC 를 말씀 드 리 면 3 대 프레임 중의 또 다른(anuglar)도 아 실 겁 니 다.
만약 당신 이 angular 를 쓴 적 이 있다 면 이 의 미 를 잘 알 수 있 을 것 입 니 다.다음 코드 를 보 세 요.

<input ng-model="ball.basketball" />
.contronller('BallController', ($scope) => {
  const ball = {
    basketball: '     '
  }
  $scope.ball = ball
})

input 탭 은 이해 하기 쉽 습 니 다.바로 MVC 의 V(view)보기 입 니 다.
controller 는 말 그대로 MVC 의 C(controller)컨트롤 러 다.
ball 이면 MVC 의 M(model)모델 입 니 다.
MVC 의 개념 은 매우 간단 하 다.너 는 농구 의 페이지 를 보 여 줘 야 한다.
농구 모형 을 만들어 놓 고 기다 리 고 있 습 니 다.
농 구 를 보 여 줘 야 할 보 기 를 써 라.
컨트롤 러 를 사용 하여 모델 과 보 기 를 대화 시 킵 니 다.
MVC 의 개념 이 편안 하고 구조 가 규범 화 된 것 처럼 보이 지만 코드 양 이 많 으 면 전체 프로젝트 가 비대 해 지고 유연성 이 없어 보인다.
저 자 는 다행히'똥 산'이 라 고 불 리 는 angular 1.x 프로젝트 를 유지 한 적 이 있 습 니 다.수백 번(대략 있 을 것 입 니 다)의 수요 가 바 뀐 후에 모든 contrller 의 코드 가 2000 줄 을 넘 었 고 매번 bug 를 고치 고 새로운 수 요 를 쓸 때마다 여러 가지 물건 을 유지 해 야 하기 때 문 입 니 다.
그리고 MVVM 에 대해 알 아 보 겠 습 니 다.

<input v-model="ball.basketball" />
let vm = new Vue({
  data: {
    ball: {
      baskertball: '      '
    }
  }
})

M:모델 모델

V:보기

VM:ViewModel 보기 모형

사실 코드 를 보면 이해 할 수 있 습 니 다.vm 는 사실 vue 대상 입 니 다.이 기능 은 view 에 연결 되 어 있 습 니 다.Model 의 농 구 는 업데이트 되 든 다른 조작 을 하 든 vm 을 통 해 view 에 보 냅 니 다.
이렇게 하면 좋 은 점 은 첫째,업무 논 리 를 여러 번 쓸 필요 가 없다.shopcart 와 같은 기능 입 니 다.구성 요소(ViewModel)로 봉 하여 여러 곳 에서 호출 을 직접 도입 할 수 있 습 니 다.
ps:vue 와 React 의 차이 점 과 공통점
양자 의 본질 적 차이
1.vue 본질은 MVVM 프레임 워 크 이 고 MVC 에서 발 전 된 것 이다.
2.React 본질은 전단 구성 요소 화 프레임 워 크 이 고 백 엔 드 구성 요소 화 에서 발 전 된 것 입 니 다.
템 플 릿 의 차이
1.vue 는 템 플 릿 을 사용 합 니 다.

<div>
　　<h1 v-if="ok">Yes</h1>
　　<h1 v-else>No</h1>
</div>

2.React 는 JSX 템 플 릿 을 사용 하 는데 지금 은 표준화 되 어 독립 적 으로 사용 할 수 있 습 니 다.

<div>
{ok?<h1>Yes</h1>:<h1>No</h1>}
</div>

학습 비용 으로 볼 때 JSX 템 플 릿 은 더욱 간단 합 니 다.{}에 서 는 js 문법,vue 템 플 릿 v-if,v-else 명령 을 배 워 야 합 니 다.
템 플 릿 논리 분리 측면 에서 볼 때 JSX 템 플 릿 과 JS 논리 가 혼합 되 어 분리 되 지 않 아 혼란 을 초래 하기 쉽다.
3.구성 요소 화의 차이
React 자체 가 구성 요소 화 이 고 구성 요소 화가 없 으 면 React 가 아 닙 니 다.
vue 도 구성 요 소 를 지원 합 니 다.MVVM 에서 의 확장 에 불과 합 니 다.
4.이들 의 공통점
모두 구성 요소 화 지원
모두 데이터 구동 보기 입 니 다.
총결산
위 에서 말 한 것 은 편집장 이 소개 한 면접 문제 입 니 다.react 와 vue 의 차이 점 분석 은 여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!