>  기사  >  웹 프론트엔드  >  vue3.0과 vue2.0의 차이점은 무엇입니까?

vue3.0과 vue2.0의 차이점은 무엇입니까?

青灯夜游
青灯夜游원래의
2020-11-18 15:01:59112597검색

차이점: vue2.0의 데이터가 아무리 크더라도 처음에는 데이터에 대한 관찰자가 생성되므로 페이지가 로드될 때 명백한 성능 압박이 발생할 수 있습니다. Vue3.0은 "초기 표시 부분을 렌더링하는 데 사용되는 데이터"에 대해서만 관찰자를 생성하며 vue3.0의 관찰자는 더 효율적입니다.

vue3.0과 vue2.0의 차이점은 무엇입니까?

vue3.0과 2.0의 차이점

Vue-cli3.0이 8월 11일에 정식 출시되었다는 댓글을 읽어보니 호환성이 별로 좋지 않습니다. 명령, no 특히 낙관적

vue2.0과 비교하여 vue3.0의 릴리스에는 더 빠르고, 더 작고, 유지 관리가 쉽고, 네이티브가 더 쉽고, 개발자가 더 쉽습니다.

더 빠릅니다
1. 가상; DOM이 완전히 재작성되었으며 마운팅 및 패치가 100% 더 빨라졌습니다.
2. 런타임 오버헤드를 줄이기 위한 더 많은 컴파일 시간 알림 3. 전체 언어 적용 및 더 나은 성능을 충족하기 위한 프록시 관찰자 메커니즘 기반; 더 빠른 기본 프록시 사용
5. 구성요소 인스턴스 초기화 속도 100% 증가
6. 속도 2배 / 메모리 사용량 5배 감소

1. 트리 쉐이킹

2. 새로운 기능; 핵심 런타임: ~ 10kb gzipped; ===============

3.0에 TypeScript 및 PWA 지원이 새로 추가되었습니다.

일부 명령이 변경되었습니다. :

npm 다운로드 및 설치 install -g vue@cli

  • Delete vue list

  • Create project vue create

  • Start project npm run Serve

  • 기본 프로젝트 디렉토리 구조도 변경되었습니다. 구성 파일 디렉터리, 구성 및 빌드 폴더

  • 정적 폴더를 제거하고 새 공용 폴더를 추가하고 src 파일에서 index.html을 공용

  • 으로 이동했습니다. 새 "views" 폴더가 폴더에 추가되었습니다. 뷰 구성 요소 및 공용 구성 요소 분류

  • 참고:
  • php 중국어 온라인 작업

    도 최신 버전의 vue 과정을 가르치기 시작했습니다.

설치

npm install -g vue@cli
프로젝트 파일 만들기:

vue create project //项目的名称
======================

vue2와 vue3의 차이점


1. 일반적으로 사용되는 명령

vue -V로 로컬 vue 버전 보기

2. 공식 문서 3.0: https://cli.vuejs.org/zh/

3. 파일 생성

3.0: vue create 프로젝트 폴더에 들어가 프로젝트를 생성합니다.

2.0: vue init webpack

4. 프로젝트 시작

3.0 시작 npm run submit

2.0 시작 npm run dev

build가 사라졌고, config가 사라졌습니다. 아, 가장 중요한 것은 3.0 설치입니다. 프로젝트 진행 중에 노드 모델을 자동으로 다운로드합니다.

루트 디렉토리에 vue.config.js를 생성하세요

module.exports = {
 baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
 // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
 // outputDir: 'dist',
 // pages:{ type:Object,Default:undfind }
 devServer: {
 port: 8888, // 端口号
 host: 'localhost',
 https: false, // https:{type:Boolean}
 open: true, //配置自动启动浏览器
 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
 proxy: {
 '/api': {
 target: &#39;<url>&#39;,
 ws: true,
 changeOrigin: true
 },
 &#39;/foo&#39;: {
 target: &#39;<other_url>&#39;
 }
 }, // 配置多个代理
 }
 }

===================

Vue3.0과 Vue2.0의 차이점

1 , 기본적으로 게으른 관찰을 수행합니다.

버전 2.x에서는 데이터가 아무리 크더라도 처음에는 관찰자가 생성됩니다. 데이터가 크면 페이지가 로드될 때 상당한 성능 압박이 발생할 수 있습니다. 버전 3.x에서는 "처음에 보이는 부분을 렌더링하는 데 사용되는 데이터"에 대해서만 관찰자가 생성되며 3.x 관찰자가 더 효율적입니다.

2. 더욱 정확한 변경 알림. 비례적으로 말하자면, 버전 2.x에서 Vue.set을 사용하여 객체에 속성을 추가하면 버전 3.x에서는 이 객체의 모든 감시자가 다시 실행되고 해당 속성에 의존하는 감시자만 다시 실행됩니다. 다시 실행됩니다.

3.0에는 TypeScript 및 PWA

4에 대한 지원이 새로 추가되었습니다. 일부 명령이 변경되었습니다.

다운로드 및 설치 npm install -g vue@cli

Delete vue list

Create project vue create

프로젝트 시작 npm run Serve

5. 기본 프로젝트 디렉터리 구조도 변경되었습니다.

구성 파일 디렉터리, config 및 빌드 폴더가 제거되었습니다.

정적 폴더가 제거되고 공용 폴더가 추가되었으며 index.html이 추가되었습니다. 공개로 이동되었습니다

뷰 구성 요소와 공개 구성 요소를 분류하기 위해 src 폴더에 views 폴더를 추가했습니다

관련 권장 사항:

2020 프런트 엔드 Vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 추천: 2020년 최신 5개 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육

을 방문하세요! !

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.