ホームページ  >  記事  >  ウェブフロントエンド  >  vue3.0とvue2.0の違いは何ですか?

vue3.0とvue2.0の違いは何ですか?

青灯夜游
青灯夜游オリジナル
2020-11-18 15:01:59112630ブラウズ

相違点: vue2.0 では、データがどれほど大きくても、最初にオブザーバーが作成されます。データが大きい場合、ページのロード時に明らかなパフォーマンスのプレッシャーが発生する可能性があります。 Vue3.0 は「最初に表示される部分をレンダリングするために使用されるデータ」のオブザーバーのみを作成します。vue3.0 のオブザーバーはより効率的です。

vue3.0とvue2.0の違いは何ですか?

vue3.0 と 2.0 の違い

#Vue-cli3.0 in 8 3月11日に正式リリースされましたが、コメントを読んでみると、互換性はあまり良くなく、コマンドも多く変更されているようで、あまり楽観視していません。 vue3.0 のリリースは主に以下の点に反映されています: 高速化、小型化、保守が容易、ネイティブ化が容易、開発者が容易;

高速化

1. 仮想 DOM が完全に書き直されました。マウントとパッチ適用が 100% 高速化 ; 2. 実行時のオーバーヘッドを削減するためのコンパイル時のリマインダーの追加; 3. 言語を完全にカバーし、パフォーマンスを向上させるためのプロキシベースのオブザーバー メカニズム;
4. オブジェクトを破棄します。プロパティを定義、より高速なネイティブ プロキシを使用します;
5. コンポーネント インスタンスの初期化速度が 100% 増加します;
6. 速度が 2 倍になり、メモリ使用量が半分になります;


は小さい

1. ツリーシェイキングがよりフレンドリー; 2. 新しいコアランタイム: ~ 10kb gzip圧縮;
=============== =

3.0 TypeScript と PWA のサポートが新たに追加されました

いくつかのコマンドが変更されました:

npm install -g vue@cli
    をダウンロードしてインストールします
  • 削除された vue リスト
  • プロジェクト vue create
  • #プロジェクトの開始 npm runserve

  • デフォルトのプロジェクト ディレクトリ構造も変更されました:

  • #構成ファイル ディレクトリ、config および build フォルダーが削除されました

  • # static フォルダーを削除し、パブリック フォルダーを追加し、index.html を public に移動しました。
  • ビュー コンポーネントとパブリック コンポーネントを分類するために、src フォルダーにビュー フォルダーを追加しました
  • 注意:
    php Chinese online work

    では、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 enterプロジェクトを作成するプロジェクト ファイル フォルダー。

2.0: vue init webpack

4. プロジェクトを開始します

3.0 npm runserveを開始します

2.0 npm run devを開始します

build 消えた、設定が消えた、ああ、そして最も重要な点は、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. 3.0 では、TypeScript と PWA

4 のサポートが新たに追加されました。いくつかのコマンドが変更されました:

npm install -g vue@cli

# をダウンロードしてインストールします。 ##削除された vue リスト

プロジェクト vue create

プロジェクトの開始 npm runserve

5. デフォルトのプロジェクト ディレクトリ構造も変更されました:

構成ファイル ディレクトリ、config フォルダー、および build フォルダーが削除されました。

静的フォルダーが削除され、パブリック フォルダーが追加され、index.html が public に移動されました。

src フォルダー内の新しいビュー フォルダービュー コンポーネントとパブリック コンポーネントを分類するために追加されました

関連する推奨事項:

2020 フロントエンド Vue インタビューの質問の概要 (回答付き) )


vue チュートリアルの推奨事項: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、次のサイトをご覧ください:

プログラミング教えます

! !

以上がvue3.0とvue2.0の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。