반응과 vue의 차이점은 무엇입니까?-HTML 튜토리얼-php.cn

vue의 선택은 React와 Angle 사이입니다. 프레임워크 자체는 React보다 약간 더 많은 구문을 가지고 있지만 Angle보다 약간 적습니다.

다양한 선택들 때문에 제시된 글쓰기와 사고방식은 좋고 나쁨을 떠나 분명 달라지지만, 분명 선호도도 달라지게 마련이다.

React의 단순성은 핵심 API가 실제로 매우 적다는 것입니다. 따라서 우리는 React가 실제로는 완전한 프레임워크가 아니라 UI 라이브러리라고 말하는 곳을 많이 보게 될 것입니다. 그는 단지 구성요소를 생성하는 방법과 구성요소 간에 데이터를 전송하는 방법을 알려줍니다. 컴포넌트를 생성하는 방법조차도 ES6 클래스 구문을 사용하는 것입니다(createClass는 반응 16에서 삭제됩니다).

따라서 개발 시 React 사용은 ES6의 구문에 크게 의존합니다. 반응 자체에는 그다지 제한적인 구문이 없기 때문입니다. 컴포넌트의 props, state, ref, lifecycle만 마스터하면 되는데 추가로 알아야 할 내용은 많지 않은 것 같습니다. jsx 템플릿에서 렌더링을 순회하려는 경우에도 기본 맵 방법을 사용해야 합니다. React의 고차 구성 요소에 대해 이해한 후에는 이것이 실제로 JavaScript 함수형 프로그래밍에 관련된 사고 방식이라는 것을 알았습니다.

그래서 제 생각에는 React의 가장 큰 특징은 간단하고 네이티브 JavaScript에 매우 가깝다는 것입니다. 즉, 개발자에게는 제약이 거의 없습니다. 함수를 구현하려면 네이티브 JavaScript를 사용하여 구현하는 방법을 알면 React를 사용하여 구현하는 방법도 쉽게 알 수 있습니다.

물론, 단순한 핵심 API가 시작하기 쉽다는 의미는 아닙니다. 사용 초기에는 경험이 부족하면 React를 사용하여 작성하는 페이지의 성능이 매우 저하될 수 있습니다. 의도치 않게 구성 요소에 중복된 렌더링이 많이 있을 수 있기 때문입니다.

예를 들어, 많은 사람들이 반응을 배울 때 카운트다운 예제를 보게 될 것입니다. 이 예제는 구성 요소의 상태를 수정하여 구현됩니다. 그러나 사실 모든 사람은 이러한 접근 방식이 매우 잘못되었음을 점차 깨닫게 될 것입니다. 상태가 수정될 때마다 구성 요소와 모든 하위 구성 요소가 다시 렌더링되기 때문입니다. 이는 매우 비용이 많이 드는 행동입니다. 물론, 많은 사람들이 디버깅 반응 시 고주파수 반복 렌더링으로 인해 브라우저를 직접 정지시키는 것도 알고 있습니다. 이러한 문제는 You Yuxi가 걱정하는 제한 사항이 너무 적기 때문에 발생합니다.

인터넷에서 자신이 훌륭하다고 생각하는 일부 사람들은 React/Vue와 같은 프레임워크를 사용하지만 실제로는 동일한 코드를 작성한다는 점이 무서운 점입니다. Angular를 수년간 써왔다고 계속 말하는 분도 만났는데, Angular는 정말 쓰레기이고, 성능도 너무 나빠서, 결국에는 트랙도 못 쓰게 됐다고 하더군요. 에 의해. 마시다!

React에는 실제 양방향 바인딩이 없습니다. 따라서 복잡한 양식 유효성 검사와 같은 일부 복잡한 시나리오를 처리하는 것은 매우 번거로운 일입니다.

상대적으로 vue는 더 많은 기능을 제공하므로 간단한 코드만으로 많은 효과를 얻을 수 있기 때문에 초보자도 매우 만족할 것입니다. 개인적으로 훌륭하다고 생각하는 몇 가지 기능을 나열하겠습니다.

계산된 속성의 통합 관리

JavaScript 표현은 매우 편리합니다. Vue든 React든 표현 능력은 필수적입니다. 그러나 Vue 공식 문서에 따르면 템플릿에 너무 많은 로직을 넣으면 템플릿이 과중해지고 유지 관리가 어려워집니다. Vue 컴포넌트는 표현식을 균일하게 관리하기 위해 계산된 속성을 제공합니다.

<template><p id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></p></template><script>export default {name: &#39;example&#39;,
    data () {return {message: &#39;Hello&#39;
        }
    },computed: {reversedMessage: function() {return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
        }
    }
}</script>

로그인 후 복사

클래스의 동적 구문은 나를 매우 행복하게 만듭니다

실제로 우리는 요소 클래스의 특정 값이 다양한 상태에 따라 결정되어야 하는 그러한 시나리오를 많이 찾을 것입니다. 그리고 jsx 템플릿에 다음과 같은 단순한 표현이나 조건부 판단만 있다면 사람들이 매우 불편해 할 것입니다

<p className={active ? &#39;note active&#39; : &#39;note&#39;}></p>

로그인 후 복사

조금 더 복잡한 로직을 이렇게 처리하면 참을 수 없을 것입니다. vue에서 지원되는 구문은 이 문제를 매우 쉽게 해결합니다.

// 可以放在任何你觉得舒服的位置const pcls = {active: active,note: true
}

<p class={pcls}></p>

로그인 후 복사

이런 식으로 계속해서 클래스 이름을 추가해도 복잡성이 더 커지지는 않습니다.

물론 이는 도구 방식으로 해결할 수 있는 문제일 뿐이며, React를 사용할 때 클래스 이름을 사용하여 동일한 기능을 완성할 수 있습니다. 그러나 vue는 이를 직접 지원합니다.

양방향 바인딩

React는 양방향 바인딩을 지원하지 않기 때문에 복잡한 양식 유효성 검사를 구현하는 것은 매우 고통스럽습니다. Vue는 단방향 데이터 흐름을 핵심으로 삼지만 양방향 바인딩을 완전히 포기하지 않으므로 복잡한 양식 검증 시나리오에서 개발 효율성이 React보다 훨씬 높습니다. 이것은 또한 문제를 줄이는 vue의 측면이기도 합니다.

Modifier

이벤트 처리 로직을 작성할 때 e.preventDefault 및 기타 작업이 필요한 경우가 많습니다. vue에서 제공하는 수정자 기능은 이러한 코드를 저장하는 데 도움이 되며 이는 매우 편리합니다. 좀 더 사용해보시면 정말 유용하다는 것을 느끼실 수 있을 것입니다.

<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联  --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件侦听器时使用事件捕获模式 --><p v-on:click.capture="doThis">...</p><!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --><p v-on:click.self="doThat">...</p>

로그인 후 복사

물론 주요 수식어 등도 있습니다. 자세한 내용은 공식 웹사이트로 이동하세요.

Vue는 편리하고 사랑스러운 구문 설탕을 많이 제공하므로 공식 웹 사이트에서 하나씩 경험해 볼 수 있습니다. 기사 시작 부분에서 언급했듯이 Vue에는 몇 가지 문법 제한이 있으며 이러한 문법 제한은 개발 비용을 줄이고 개발 효율성을 어느 정도 향상시킵니다. 이것이 아마도 많은 사람들이 vue가 더 간단하고 배우기 쉽다고 생각하는 이유일 것입니다.

학습의 용이성 측면에서 React를 시작하기가 더 어려운 주된 이유는 React 자체 때문이 아니라 React를 둘러싼 풍부한 생태계 때문입니다. React 자체는 충분히 간단하기 때문에 더 많은 React 구성 요소를 마스터해야 합니다. React-Router, React-Redux 등이 있습니다. 그리고 우리가 그것에 대한 광범위한 지식이 없었을 때조차 알지 못했던 훌륭한 기능을 갖춘 유용한 구성 요소가 많이 있습니다. 예를 들어, Ant-design의 소스 코드를 공부할 때 이런 방식으로 사용할 수 있는 구성 요소가 있다는 사실에 종종 놀라곤 합니다. 정말 대단합니다! 그리고 Vue를 배울 때 Vue가 이미 이렇게 훌륭한 구성 요소를 지원하고 있다는 사실에 놀랐습니다!

그래서 나중에 vue와 React가 매우 유사하다는 것을 알게 되었습니다.

저는 여전히 반응을 선호합니다. 하지만 단지 React의 구문이 ES6에 더 가깝기 때문입니다

위 내용은 반응과 vue의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!