홈 > 커뮤니티 > IT뉴스
IT뉴스

Vue 3.0 소식

M 웹동네 0 774

아래 원문을 구글 번역기를 통해 번역한 내용입니다. 

참고하세요.

 

원문:

https://medium.com/@mattmaribojoc/what-does-vue-3-0-mean-for-web-development-851052fc0138 

 

--------------------------------- 

Vue 3.0은 웹 개발을 위해 무엇을 의미합니까?

지난 11 월, Vue 창작자 인 Evan You는 상승중인 Javascript 프레임 워크의 최신 반복 인 Vue 3.0의 주요 업데이트를 선보였습니다. 이러한 최적화를 통해 Vue는보다 효율적이고 모듈화되며 사용하기 쉽습니다. 이 변경 사항과 Vue 3.0의 출시에 따른 영향에 대해 논의하겠습니다.

지금 Vue는 무엇입니까?

Vue는 "사용자 응용 프로그램을 구축하기위한 점진적 프레임 워크"라는 자신 만의 말이 있습니다. 개별 Vue 라이브러리를 다른 프로젝트에 통합하거나 Vue를 사용하여 복잡한 프로젝트에 전념 할 수있는 능력을 갖춘 유연한 설계가 가능합니다.

Vue는 종종 접근하기 쉽고 구현하기 쉬운 프레임 워크 중 하나로 간주됩니다. React와 같은 도구가 Javascript를 사용하여 DOM 요소를 정의하는 반면 순수한 HTML 템플릿을 지원합니다.

2019 년 초 현재 Vue 2.0에 있습니다. React and Angular와 비교하여 여전히 시장 점유율이 낮은 반면, Vue는 지속적으로 인기를 얻고 있습니다. 제 생각에 Vue 3.0의 출시로 인해 사용량이 증가하고 다른 주요 프레임 워크에 대한 합법적 인 대안이 될 것입니다.

다음은 각 프레임 워크의 작업 가용성 수를 보여주는 그래프입니다. 보시다시피, VueJS는 현재 업계 표준에 가까워지기 전에 여전히 갈 방법입니다.

0*2_DnDwkgKh4bwVss
출처 : TechMagic

Vue 3.0의 가장 큰 변화

기조 연설에서 Evan You는 Vue 3.0의 5 가지 주요 변경 사항을 강조했습니다.

  1. 속도
  2. 크기
  3. 유지 보수성
  4. 타겟 타게팅
  5. 사용의 용이성

이제 깊이있게 탐구 해 봅시다.

빠른 속도로 만들기

이 주제는 대부분의 기술 변화가 있었고 현재 Vue의 주요 판매 요점 중 하나 인 점에서 You 's talk의 상당 부분을 차지했습니다.

VueJS는 이미 렌더링 속도로 알려져 있습니다. 비교 테스트에서 다른 프레임 워크를 능가합니다. 그러나 2.0 코드에 적용된 가장자리 케이스 및 수정 횟수로 인해 Vue 팀은 마이크로 최적화를 사용하여 렌더링 코드를 완전히 다시 작성하기로 결정했습니다. 사용자에 따라 이러한 최적화를 통해 탑재 및 초기화 속도를 최대 100 %까지 높일 수 있습니다.

VueJS는 다른 프레임 워크와 마찬가지로 가상 DOM을 사용하여 구성 요소를 렌더링합니다. 렌더링 프로세스의 속도를 높이려면이 가상 DOM의 작업량을 줄여야합니다. 3.0에는이 목표를 달성하기위한 다음과 같은 기능이 포함되어 있습니다.

컴파일 시간 힌트  - 렌더링 프로세스를 개선함으로써 Vue 3.0은 코드 최적화를 보여주는보다 유용한 컴파일 타임 힌트를 출력합니다

구성 요소 패스트 경로  - 템플릿 개체가 구성 요소인지 확인하는 대신 Vue 3.0은 대문자로 구성 요소를 표시한다는 가정을합니다. 이 가정은 어림짐작을 없애고 렌더 프로세스를 가속화합니다.

Monomorphic Calls - 컴퓨터 과학 수업을 듣는 사람은 다형성의 개념을 두뇌에 부딪 혔지  만 Vue 3.0은 렌더링 과정에서 단일 양식 호출을 사용합니다. 이 마이크로 최적화는 항상 렌더링 엔진에 동일한 모양의 객체를 전달하므로 자바 엔진을보다 쉽게 ​​최적화 할 수 있습니다.

0*E6Qf2bFIFtdUQH1q
Vue 3.0의 Evan You 슬라이드

최적화 된 슬롯 생성  -이 겉으로는 복잡한 용어는 실제로 간단한 개념으로 종결됩니다. 종속성을 사용하는 인스턴스가 종속성을 추적하는지 확인하십시오. 현재, 부모 구성 요소와 하위 구성 요소 중 하나가 종속성을 업데이트 할 때마다 둘 다 강제로 다시 렌더링됩니다. 그러나 3.0에서는 부모와 자식이 서로 다른 종속성을 가지며 각 종속성이 변경 될 때만 업데이트됩니다. 이것은 페이지에서 발생하는 재 렌더링의 수를 대폭 감소시킵니다.

0*h3wl-2Wuj9hXfR6T

정적 트리 호이 스팅  - 이것이 Vue 2.0에 새로 추가 된 것은 아니지만 정적 트리 호이 스팅은 프로젝트 속도를 크게 향상시킵니다. 이름에서 알 수 있듯이 종속성이없는 정적 요소는 다시 렌더링하지 않습니다. 이것은 가상 DOM의 작업을 크게 줄이고 많은 프로젝트 오버 헤드를 절약합니다.

프록시 기반 관측  - Vue 3.0은 요소의 반응성을 추적하기 위해 ES2015 프록시 기반 관측을 사용합니다. 이 변경으로 인해 Vue 2.0이 지원할 수없는 몇 가지 사례가 제거되었을뿐만 아니라 훨씬 더 나은 성과를 거두었습니다. You에 따르면 이러한 최적화로 인해 구성 요소 인스턴스를 100 % 빠르게 초기화 할 수 있으며 2.0에 비해,

프록시 기반 관측 Vue 2.0 관측자보다 속도가 두 배, 메모리 사용량이 절반.
0*L1g8Yq_I55SubAud

더욱 가볍고

현재 VueJS는 이미 작습니다 (20kb gzip). 그러나 트리 떨림 (비 필수 코드 제거) 덕분에 3.0의 예상 크기는 대략 10 kb gzip입니다. 이것은 Vue 프로젝트에서 필수적이지 않은 모든 라이브러리를 제거하고 주 src에 포장하지 않고 import 문을 통해 사용할 수있게하는 것입니다.

유지 관리 능력 향상

TypeScript로 플로우  - 더 많은 사용자가 더 쉽게 액세스 할 수 있도록하기 위해 Vue 3.0은 Flow에서 TypeScript로 전환합니다. Typescript를 사용하기 위해 코드베이스를 다시 작성하지만 Typescript를 사용하지 않고 순수한 자바 스크립트를 사용하려는 사람들과 호환되고 사용하기 쉽도록 만드는 것에 중점을 두었습니다.

디커플링 패키지 -  현재 상태와 비교하여, Vue 3.0은 실행을 위해 내부 패키지를 사용 하는 훨씬 더 모듈화 된 환경입니다. 따라서 개발자가 소스 코드에 실제로 참여할 수 있도록 투명성을 부여하면서 사용자 정의 및 유연하게 만들 수 있습니다.

0*2Z3nPM4q5sxhwjMd

컴파일러 다시 쓰기  - 이것은 내가 가장 흥분하는 기능 중 하나입니다. 이러한 변경으로 더 나은 IDE 지원이 가능할뿐만 아니라 런타임 오류가 발생하면 오류의 파일 위치와 행 번호가 표시되는 소스 맵이 생성됩니다. Vue를 사용하여 작업하는 경우 런타임 오류 메시지가 문제를 확인하는 데 거의 도움이되지 않는다는 것을 알고 있습니다. 이 업데이트는 신선한 공기 개발자의 숨결이되어야합니다.

네이티브를 쉽게 타겟팅 할 수있게 해줍니다.

Vue 3.0은 플랫폼에 무관심합니다. 즉, 순수 자바 스크립트를 실행하고 기본 빌드에서 Node.js와 같은 웹 기능을 사용하지 않을 것입니다. 따라서 유연성 때문에 웹, iOS 또는 Android 용 응용 프로그램을 쉽게 만들 수 있습니다. 네이티브를 목표로함으로써, Vue는 iOS 및 Android 프로젝트에 대한 수많은 지원을 제공하는 React와 비교할만한 대안으로 자리 매김하고 있습니다.

개발자의 삶을보다 쉽게 ​​만들기

간단히 말해서, VueJS를 사용하는 주된 프로라고 생각합니다. 간단하지만 강력한 기능입니다. 이것들은 강조된 측면이었다.

Reactivity API 공개  - 새로운 변경 사항으로 인해 개발자는 명시 적으로 반응 객체를 생성 할 수 있습니다. 커스텀 리 렌더링 훅을 만드는 것. 3.0은 또한 VueJS 사용자의 일반적인 불만을 다룹니다. 언제 그리고 왜 내 구성 요소를 다시 렌더링합니까?

이제 사람들이 업데이트를 트리거하는 것을 볼 수있는 renderTriggered 이벤트가 있습니다. VueJS에 더 많은 투명성을 부여하는 환상적인 기능.

0*0JTDLAiB0bmJ3fMw

그래서 뭐야?

당신이 생각할 수도 있습니다, " 그래서 뭐야? 사람들은 여전히 ​​React 또는 Angular를 사용할 것입니다. "그리고 당신 말이 맞을지도 모릅니다. 현재 업계 표준 인 React and Angular는 구성 요소 프레임 워크에서 가장 많이 사용되는 옵션이 될 것입니다. 그러나 Vue 3.0에서 논의 할 몇 가지 흥미로운 점이 있습니다. Vue 3.0은 향후 경쟁적인 대안으로 작용할 것입니다.

속도 . 지금도 VueJS는 React 또는 Angular보다 렌더링 시간이 빠릅니다. 토론 한 마이크로 최적화를 사용하면 Vue가 다른 프레임 워크의 렌더링 시간의 절반을 차지할 수 있습니다. 이것은 일부 개발자를 다른 환경에서 끌어낼 수있는 핵심 포인트입니다. 아래 테이블은 Vue 2.0이 이미 가지고있는 속도와 메모리 이점을 보여줍니다.

0*gqzVUEFEKSfRiMfL
출처 : 유니콘 용품

적응성. VueJS는 구현하기 쉽도록 설계되었습니다. 기존 프로젝트에 추가하거나 SPA에 전원을 공급할 때 사용하면 많은 요구 사항을 정의하는 데 도움이되는 많은 문서 및 사용 사례가 있습니다. Vue 3.0의 변경 사항, 특히 반응성 후크와 새로운 모듈 식 디자인의 노출로 인해이 유연한 언어는 더욱 강력 해졌습니다. VueJS의 단순성을 강조하기 위해 계속 진행할 것이지만, 더 많은 기술 및 숙련 된 개발자가 프로젝트를 완전히 제어 할 수있는 많은 기능이 있습니다.

선적 서류 비치. 이것은 "나 문제"일지 모르지만 나는 개인적으로 Vue의 문서가 React보다 10 배 더 이해하기 쉽다고 생각합니다. 사실, Hello World Tutorial이나 Vue의 모든 것을 완료하지 않아도됩니다. 이 문서는 내 사용 사례를 이해하고 시작하기에 충분했다. 너는 너 자신을 볼 수 있다 .

어려움 (또는 그 부족함)  - 내가 문서에 대해 말한 것처럼 - Vue는 매우 접근하기 쉽습니다. 자연스러운 HTML, sass와 scss, Javascript와 같은 CSS / CSS 프리 프로세서를 사용할뿐만 아니라 상대적으로 새로운 프레임 워크를위한 상당한 양의 지원과 라이브러리도 함께 제공합니다. 새로운 개발자를 위해 뛰어나기 쉽고 고급 개발자를 위해 확장 성이 뛰어납니다.

Vue 3.0의 모든 영향을 보려면 2019 년에 출시 될 때까지 기다려야합니다 (희망 사항). VueConf Toronto에서 선보인 Evan You Vue는 Vue를 더욱 강력하고 효율적으로 만들었 기 때문에 내 기대가 높습니다. 새 릴리스. Vue 3.0과 Vue v. React 대 Angue 토론에 대한 당신의 생각은 무엇입니까?

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기
  • 카카오스토리로 보내기
  • 네이버밴드로 보내기

Comments

홈 > 커뮤니티 > IT뉴스
IT뉴스
스터디맵
페이스북에 공유 트위터에 공유 구글플러스에 공유 카카오스토리에 공유 네이버밴드에 공유