vue3.0의 새로운 기능은 무엇입니까
Evan You(You Yuxi)는 2018년 11월 16일 오전 Vue 토론토에서 열린 기조 연설에서 Vue 3를 미리 선보였습니다. 최신 브라우저에서 지원되는 새로운 기능을 활용하는 Vue 3는 우리가 이미 알고 사랑하는 Vue.js의 강력하고 향상된 버전이 될 것입니다.
요약하자면 Vue 3는 다음 측면에서 기대할 가치가 있습니다.
faster
# ㅋㅋㅋ ## 🎜🎜#더 쉬워진 개발 및 사용
더 빠르게:
Virtual DOM Rewrite
가상 DOM 재작성을 사용하면 더 많은 컴파일 시간 프롬프트를 통해 런타임 오버헤드를 줄일 수 있습니다. 재작성에는 가상 노드 생성을 위한 보다 효율적인 코드가 포함됩니다.최적화된 슬롯 생성
현재 Vue 버전에서는 상위 구성 요소가 다시 렌더링되면 해당 하위 구성 요소도 다시 렌더링되어야 합니다(11월 20일 일일 업데이트: 이 문장은 엄격하지 않으며 쉽게 오해할 수 있습니다. 2.0 구성 요소의 재렌더링은 구성 요소 세분성에서 이루어집니다. 수정된 데이터가 하위 구성 요소의 소품이 아닌 한, 하위 구성 요소가 트리거됩니다. 인용: https://juejin.im/pin/5bf28ddd6fb9a056783705fc) Vue 3을 사용하면 상위 및 하위 구성요소를 독립적으로 다시 렌더링할 수 있습니다.
정적 트리 호이스팅정적 트리 호이스팅을 사용하면 Vue 3의 컴파일러가 정적 구성 요소가 무엇인지 감지한 다음 이를 호이스팅하여 렌더링 비용을 줄일 수 있음을 의미합니다. 전체 트리 구조를 패치하는 과정을 건너뛸 수 있습니다.
정적 소품 호이스팅
또한 Vue 3에서는 노드를 변경하지 않는 패치 프로세스를 건너뛰는 정적 소품 호이스팅을 기대할 수 있습니다.
프록시 기반 관찰자 메커니즘
현재 Vue의 반응형 시스템은 Object.defineProperty의 getter 및 setter를 사용합니다. 그러나 Vue 3는 관찰자 메커니즘으로 ES2015 프록시를 사용합니다. 이렇게 하면 기존 경고가 제거되고 속도가 두 배로 향상되며 메모리 오버헤드가 절반으로 절약됩니다.
IE11을 계속 지원하기 위해 Vue 3에서는 이전 관찰자 메커니즘과 새 프록시 버전을 지원하는 빌드를 출시할 예정입니다.
Smaller:Vue는 런타임에 약 20kb로 압축되어 이미 매우 작습니다. 그러나 새로운 코어 런타임이 약 10kb gzip으로 측정되므로 크기가 훨씬 더 작을 것으로 예상할 수 있습니다. 이는 대부분 사용되지 않는 라이브러리를 제거함으로써 달성됩니다(트리 쉐이킹이라고도 함). 예를 들어 전환 요소를 사용하지 않는 경우 해당 요소는 포함되지 않습니다.
유지 관리 용이성:대부분의 Vue 개발자는 라이브러리 자체에 대해 작업하지 않지만 Vue 3가 더 많은 라이브러리로 이어질 것이라는 점을 아는 것이 좋습니다. 유지 관리 가능한 소스 코드. TypeScript를 사용할 뿐만 아니라 많은 패키지가 분리되어 모든 것이 더욱 모듈화됩니다.
더 많은 기본 지원
런타임 커널은 플랫폼에 구애받지 않으므로 Vue가 다음과 같은 모든 플랫폼과 더 쉽게 통합될 수 있습니다. 웹, iOS 또는 Android).
개발 및 사용이 더 쉬워짐
Observer 모듈이 자체 패키지에 담겨있어 새로운 방식으로 사용할 수 있습니다#🎜 🎜#
다시 렌더링된 위치를 추적하는 것도 더 쉬워집니다. Evan의 강연에서 그는 라이브 코딩을 수행하고 구성 요소를 다시 렌더링하도록 트리거하는 요소를 찾기 위해 Vue 애플리케이션을 추적하는 방법(아래 코드 사용)을 보여주었습니다. 이는 대규모 애플리케이션과 성능 미세 조정에 유용합니다.Vue 3.0은 TypeScript에 대한 지원도 향상하여 편집기에서 고급 유형 검사와 유용한 오류 및 경고를 허용합니다.
Experimental Hooks APIVue에서 두 구성 요소 간의 동작을 공유해야 할 때 일반적으로 Mixins를 사용합니다. 그러나 Evan은 Mixins의 일부 문제를 피하고 관용적인 Vue 코드를 더 편안하게 사용하기 위해 Hooks API를 사용하려고 노력하고 있습니다.실험적 시간 분할 지원
동시에 다시 렌더링하려는 구성 요소가 많으면 모든 브라우저의 속도가 느려지기 시작하여 사용자 경험이 더 나빠질 수 있습니다. Evan은 JS 실행을 처리할 사용자 상호 작용이 있는 경우 브라우저에 제공될 여러 부분으로 나누기 위해 Time Slicing을 사용하는 방법을 보여주었습니다.위 내용은 vue3.0의 새로운 기능은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7467
15
1376
52
77
11
46
19
18
20
vue3+vite: src에서 이미지를 동적으로 가져오기 위해 require를 사용할 때 오류를 해결하는 방법
May 21, 2023 pm 03:16 PM
vue3+vite:src는 require를 사용하여 이미지를 동적으로 가져오고 vue3+vite는 여러 이미지를 동적으로 가져옵니다. vue3을 사용하는 경우 require는 이미지를 사용할 수 없습니다. imgUrl:require(' .../assets/test.png') 와 같은 vue2는 typescript가 require를 지원하지 않기 때문에 가져오므로 이를 해결하는 방법은 다음과 같습니다. waitimport를 사용합니다.
vue3 프로젝트에서tinymce를 사용하는 방법
May 19, 2023 pm 08:40 PM
tinymce는 완전한 기능을 갖춘 리치 텍스트 편집기 플러그인이지만,tinymce를 vue에 도입하는 것은 다른 Vue 리치 텍스트 플러그인만큼 원활하지 않습니다.tinymce 자체는 Vue에 적합하지 않으며 @tinymce/tinymce-vue를 도입해야 합니다. 외국 서식 있는 텍스트 플러그인이며 중국어 버전을 통과하지 못했습니다. 공식 웹사이트에서 번역 패키지를 다운로드해야 합니다(방화벽을 우회해야 할 수도 있음). 1. 관련 종속성을 설치합니다. npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. 중국어 패키지를 다운로드합니다. 3. 프로젝트 공용 폴더에 스킨과 중국어 패키지를 새로 만들고 다운로드합니다.
Vue3가 마크다운을 구문 분석하고 코드 강조 표시를 구현하는 방법
May 20, 2023 pm 04:16 PM
Vue로 블로그 프론트엔드를 구현하려면 마크다운 파싱을 구현해야 합니다. 코드가 있는 경우 코드 하이라이팅을 구현해야 합니다. markdown-it, vue-markdown-loader,marked,vue-markdown 등과 같은 Vue용 마크다운 구문 분석 라이브러리가 많이 있습니다. 이 라이브러리는 모두 매우 유사합니다. 여기서는 Marked가 사용되었고, 코드 하이라이팅 라이브러리로 하이라이트.js가 사용되었습니다. 구체적인 구현 단계는 다음과 같습니다. 1. 종속 라이브러리를 설치합니다. vue 프로젝트에서 명령 창을 열고 다음 명령 npminstallmarked-save//marked를 입력하여 markdown을 htmlnpmins로 변환합니다.
Vue3에서 페이지의 일부 콘텐츠를 새로 고치는 방법
May 26, 2023 pm 05:31 PM
페이지를 부분적으로 새로 고치려면 로컬 구성 요소(dom)의 다시 렌더링만 구현하면 됩니다. Vue에서 이 효과를 얻는 가장 쉬운 방법은 v-if 지시어를 사용하는 것입니다. Vue2에서는 v-if 명령을 사용하여 로컬 DOM을 다시 렌더링하는 것 외에도 새 빈 구성 요소를 만들 수도 있습니다. 로컬 페이지를 새로 고쳐야 할 경우 이 빈 구성 요소 페이지로 점프한 다음 다시 돌아올 수 있습니다. 빈 원본 페이지의 beforeRouteEnter 가드. 아래 그림과 같이 Vue3.X에서 새로 고침 버튼을 클릭하여 빨간색 상자 안에 DOM을 다시 로드하고 해당 로딩 상태를 표시하는 방법입니다. Vue3.X의 scriptsetup 구문에 있는 구성 요소의 가드에는
vue3 프로젝트가 패키징되어 서버에 게시된 후 액세스 페이지가 공백으로 표시되는 문제를 해결하는 방법
May 17, 2023 am 08:19 AM
vue3 프로젝트가 패키징되어 서버에 게시되면 액세스 페이지에 공백 1이 표시됩니다. vue.config.js 파일의 publicPath는 다음과 같이 처리됩니다. const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='생산'?'./':'/&
Vue3 재사용 가능한 구성 요소를 사용하는 방법
May 20, 2023 pm 07:25 PM
머리말 Vue든 React든, 여러 개의 반복되는 코드를 접하게 되면, 파일을 중복된 코드 덩어리로 채우는 대신, 이러한 코드를 어떻게 재사용할 수 있을지 고민해 보겠습니다. 실제로 vue와 React 모두 컴포넌트를 추출하여 재사용할 수 있지만, 작은 코드 조각이 발견되어 다른 파일을 추출하고 싶지 않은 경우, 이에 비해 React는 동일한에서 사용할 수 있습니다. 파일에서 해당 위젯을 선언합니다. 또는 다음과 같은 renderfunction을 통해 구현합니다. constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(
Vue3에서 아바타를 선택하고 자르는 방법
May 29, 2023 am 10:22 AM
최종 효과는 VueCropper 컴포넌트 Yarnaddvue-cropper@next를 설치하는 것입니다. 위의 설치 값은 Vue2이거나 다른 방법을 사용하여 참조하려는 경우 공식 npm 주소: 공식 튜토리얼을 방문하세요. 컴포넌트에서 참조하고 사용하는 것도 매우 간단합니다. 여기서는 해당 컴포넌트와 해당 스타일 파일을 소개하기만 하면 됩니다. 여기서는 import{userInfoByRequest}from'../js/api만 소개하면 됩니다. 내 구성 요소 파일에서 import{VueCropper}from'vue-cropper&
DefineCustomElement를 사용하여 Vue3에서 구성 요소를 정의하는 방법
May 28, 2023 am 11:29 AM
Vue를 사용하여 사용자 정의 요소 구축 WebComponents는 개발자가 재사용 가능한 사용자 정의 요소(customelements)를 생성할 수 있는 웹 네이티브 API 세트의 집합적 이름입니다. 사용자 정의 요소의 주요 이점은 프레임워크 없이도 어떤 프레임워크에서도 사용할 수 있다는 것입니다. 다른 프런트 엔드 기술 스택을 사용하는 최종 사용자를 대상으로 하거나 사용하는 구성 요소의 구현 세부 사항에서 최종 애플리케이션을 분리하려는 경우에 이상적입니다. Vue와 WebComponents는 보완적인 기술이며 Vue는 사용자 정의 요소를 사용하고 생성하는 데 탁월한 지원을 제공합니다. 사용자 정의 요소를 기존 Vue 애플리케이션에 통합하거나 Vue를 사용하여 빌드할 수 있습니다.
