ホームページ  >  記事  >  ウェブフロントエンド  >  Vue2 を使用した独立ビルドとランタイム ビルドの違い (詳細なチュートリアル)

Vue2 を使用した独立ビルドとランタイム ビルドの違い (詳細なチュートリアル)

亚连
亚连オリジナル
2018-06-22 15:42:291751ブラウズ

以下のエディターが、Vue2 に基づいた独立した構築とランタイム構築の違いについて詳しく説明します。これは良い参考値であり、皆さんの役に立つことを願っています。エディターをフォローして見てみましょう

実際、vue-cli を使用してプロジェクトをビルドする場合、この問題は発生しません。これは、プロジェクトを作成する構築プロセス中にチェックするようにすでに要求されているためです。 <span style="font-family:NSimsun">webpack.config.js<code><span style="font-family:NSimsun">webpack.config.js</span>中。

Vue2 を使用した独立ビルドとランタイム ビルドの違い (詳細なチュートリアル)

这就在这,会让你选择Vue的构建方式。

Vue2 を使用した独立ビルドとランタイム ビルドの違い (詳細なチュートリアル)

如果你勾选<span style="font-family:NSimsun">Runtime + Compiler</span>就会出现如上的配置。

其实这里涉及到一个概念:

独立构建:含义是,拥有完整的<span style="font-family:NSimsun">模版编译功能</span><span style="font-family:NSimsun">运行时调用功能</span>

运行时构建:含义是,只拥有完整的<span style="color:#000000;font-family:NSimsun">运行时调用功能</span>

Vue2 を使用した独立ビルドとランタイム ビルドの違い (詳細なチュートリアル)

为什么会有这种区分呢?

第一,因为Vue使用/运行过程分为两个阶段,第一阶段是将模版进行编译(如单个vue文件中的<span style="font-family:NSimsun">template</span> と書かれます。

Vue2 を使用した独立ビルドとランタイム ビルドの違い (詳細なチュートリアル)これはここです。 make Vue の構築方法を選択します。 Vue2 を使用した独立ビルドとランタイム ビルドの違い (詳細なチュートリアル)

ランタイム + コンパイラー<strong></strong>上記の構成が表示されます。

実際、これには次の概念が含まれます:

独立した構築: つまり、完全な

<span style="font-family:NSimsun">テンプレート コンパイル関数 <span style="color: #ff00ff"></span></span><span style="font-family:NSimsun">ランタイム呼び出し関数 <strong></strong></span>

ランタイム ビルド: つまり、完全な <span style="color:#000000;font -family: NSimsun">ランタイム呼び出し関数 <p></p></span>

Vue2 を使用した独立ビルドとランタイム ビルドの違い (詳細なチュートリアル)

この違いがあるのはなぜですか?

まず、Vue の使用/実行プロセスは 2 つの段階に分かれているため、最初の段階ではテンプレート (

<span style="font-family" vue file :nsimsun>template<p class="art_xg"></p></span>) がレンダリング関数 (render) で、2 番目の段階が実際の関数の呼び出し段階です。

2番目に、

Vue2から始まるからです。したがって、Vue2.x 以降は下請け問題が発生します。

公式の文言は次のとおりです:

スタンドアロン ビルドには、テンプレート オプションのコンパイルとサポートが含まれています。 また、ブラウザーのインターフェイスが存在することに依存するため、サーバー側のレンダリングには使用できません。 🎜🎜ランタイム ビルドにはテンプレートのコンパイルは含まれず、テンプレート オプションはサポートされません。ランタイム ビルドでは、レンダー オプションを使用できますが、単一ファイル コンポーネントでのみ機能します。単一ファイル コンポーネントのテンプレートはビルド時にレンダー関数にプリコンパイルされるため、ランタイム ビルドはレンダリング オプションの 30% のみです。独立したビルド サイズ、最小 16Kb+gzip サイズのみ。 🎜🎜🎜🎜ということで、両者の最大の違いが出てきます🎜🎜🎜🎜独立ビルドにはコンパイルが含まれており、テンプレートオプションをサポートしています🎜🎜ランタイムビルドにはテンプレートコンパイルが含まれておらず、テンプレートオプションをサポートしていません🎜🎜上記はあなたのためにまとめてみましたので、今後皆さんのお役に立てれば幸いです。 🎜🎜関連記事: 🎜🎜🎜fastclick コードのタップ「クリックスルー」を解決する方法🎜🎜🎜🎜animation.js でアニメーション化されたチェックボックスを実装する方法🎜🎜🎜🎜 vue の共通コンポーネントとフレームワーク構造 (詳細はチュートリアル) 🎜🎜 🎜🎜JSでランダムなシャッフル配列を生成する方法🎜🎜🎜🎜JavaScriptを使用して計算機を実装する方法🎜🎜🎜🎜Angularを使用してテーブルフィルタリングを実装する方法🎜🎜

以上がVue2 を使用した独立ビルドとランタイム ビルドの違い (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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