vue のコンポーネント化とモジュール化の違いは何ですか-フロントエンドQ&A-php.cn

vue のコンポーネント化とモジュール化の違いは何ですか

青灯夜游

リリース： 2022-12-15 13:35:06

オリジナル

4065 人が閲覧しました

コンポーネント化とモジュール化の違い: モジュール化はコードロジックの観点から分割され、コードの階層化された開発が容易になり、各機能モジュールの機能が一貫していることが保証されます。コンポーネント化は UI インターフェイスの観点から計画され、フロントエンドのコンポーネント化により UI コンポーネントの再利用が容易になります。

vue のコンポーネント化とモジュール化の違いは何ですか

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

モジュール性の起源

Web 開発の初期の頃、js は、単純なフォーム検証やアニメーションの実装を行うためのスクリプト言語として使用されていました。少量のコードです。スクリプトタグに記述するだけです。

Ajax 非同期リクエストの出現により、フロントエンドとバックエンドの分離が徐々に形成されてきました。クライアントはますます多くのことを完了する必要があります。コード量も増えてます。。コード量の急激な増加に対応するため、通常はコードを複数の js ファイルにまとめてメンテナンスします

しかし、同じ名前のグローバル変数の問題など、いくつかの問題が発生します

関数クロージャを使用するパッケージは変数の競合の問題を解決できますが、他のファイルで定義された変数は使用できません。

モジュール化には、エクスポートとインポートの 2 つのコアがあります。

es6 モジュラー開発について学ぶ Bar

キーワードエクスポート (エクスポート) インポート (インポート)

たとえば、ajax を送信するモジュールをカプセル化します

vue のコンポーネント化とモジュール化の違いは何ですか

場合によっては、モジュールに特定の関数が含まれています。この関数に名前を付けたくありません。インポーターが自分で名前を付けます。

エクスポートのデフォルトを使用できます

export default address
//只能默认一个

import jjj from "./aaa.js"
//可以自己命名，不要加{}

//导入 import

ログイン後にコピー

モジュール性を使用する理由モジュール化を使用する利点

もちろん、モジュール開発を使用しなくてもページのすべての機能を実現できますが、サーバーリクエストへの負荷が増大し、ユーザーエクスペリエンスが低下します。ページのニーズデータが多すぎる場合、1 つのリクエストにリクエストされたすべてのデータが含まれますが、ユーザーがそれを必要としない場合はどうなりますか?そのような要求はまだ有効ですか？もちろん効果はありませんので、このような問題はモジュール開発の考え方を使うことで解決できます

モジュール開発を使用する利点について簡単に説明します

1. 明確な組織とメンテナンスが簡単

2. すべてのデータが一度に要求されず、ユーザーエクスペリエンスが良好です

3. モジュールは相互に分離されていますが、内部メンバーは特定のインターフェイスを通じて公開できますまたは他の人に頼ることもできます。モジュール

コンポーネント化とモジュール化の比較

コンポーネント化とモジュール化を 1 つのものとして理解している人が多く、もちろん、多くの点で似ていますが、以下の類似点を見てみましょう。

1. コンポーネント化は、独立した再利用可能なコード組織単位です。コンポーネントシステムは Vue の中核機能の 1 つであり、開発者は、独立した、再利用可能な小さなコンポーネントを使用して大規模なアプリケーションを構築できます。[関連する推奨事項:

vuejs 入門チュートリアル、Web フロントエンド ]

2. コンポーネント開発により、アプリケーション開発の効率、テスト容易性、再利用性などが大幅に向上します;

3. コンポーネントの使用法は、ページコンポーネント、ビジネスコンポーネント、および一般コンポーネントに分類されます. ;

4. Vue コンポーネントは構成に基づいています。私たちが通常作成するコンポーネントは、コンポーネントではなくコンポーネント構成です。その後、フレームワークによってコンストラクターが生成されます。それらは VueComponent に基づいており、Vue を拡張しています。

5. Vue の一般的なコンポーネント化テクノロジには、主にコンポーネントの通信、拡張などに使用される属性プロップ、カスタムイベント、スロットなどが含まれます;

6. コンポーネントの合理的な分割はアプリケーションの改善に役立ちますパフォーマンス ;

7. コンポーネントは結合性が高く、結合度が低い必要があります;

8. 一方向のデータフローの原則に従います。

コンポーネント化とモジュール化の違い:

モジュール化: コードロジックの観点から分割され、コードの階層的な開発が容易になります。各機能モジュールが単一の機能を持つようにする

#コンポーネント化: UI インターフェイスの観点から分割され、フロントエンドのコンポーネント化により UI コンポーネントの再利用が容易になります

グローバルコンポーネントを定義する 3 つの方法最初の方法

 <div id="app">
        <!-- 如果要使用组件，直接把组件的名称，以HTML标签形式，引入到页面中即可 -->
    <mycom1></mycom1>
    </div>

ログイン後にコピー

<script>
        var com1 = Vue.extend({
        template:&#39;<h3>使用Vue.extend 来创建全局的Vue组件</h3>&#39;
        })
        //1,使用Vue.component(&#39;组件名&#39;，创建出来的组件模板对象)
        Vue.component(&#39;mycom1&#39;,com1)
 </script>

ログイン後にコピー

2 番目の方法

<script>
Vue.component(&#39;mycom2&#39;,{template:&#39;<div><h3>使用Vue.component 创建出来的组件</h3>s<span>template</span></div>&#39;
        })
</script>

ログイン後にコピー

3 番目の方法 Kind

<templat id="temp">
 <div>
   <h1>通过templat元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
   <h4>好用，不错</h4>
  </div>
</templat>

ログイン後にコピー

<script>
 Vue.component(&#39;mycom2&#39;,{
            template:&#39;temp&#39;
        })
</script>

ログイン後にコピー

注: コンポーネントがどの方法で作成されたとしても、コンポーネントの template 属性が指すテンプレートコンテンツにはルート要素が 1 つだけ必要であり、持つこともできます。

3 番目の方法は、仕事プロジェクトの開発に使用するのが最適です。

[関連する推奨事項:

vuejs ビデオチュートリアル

]

以上がvue のコンポーネント化とモジュール化の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。