フロントエンド面接の質問の概要 (理論パート 2) --vue

 Vue の利点は何ですか?

1) 軽量フレームワーク: データを構築するためのビューのコレクションであるビュー レイヤーのみに焦点を当てます。

2) 双方向データバインディングによりデータ操作が容易になります

3) コンポーネント化: HTML のカプセル化と再利用を実現

4) ビュー、データ、構造の分離: ロジック コードを変更せずにデータを操作するだけで、データの変更が容易になります。

5) 仮想 DOM: DOM 操作はパフォーマンスをより多く消費するため、ネイティブ DOM 操作ノードを使用しないでください。

ps:vue は SEO に役立たない

Vue での監視と計算の違い

1. Computed は計算された属性であり、watch はデータ内のデータ変更を監視するモニターです。
2. Computed はキャッシュをサポートしています。依存する属性の値が変更されると、計算された属性が再計算されます。それ以外の場合は、キャッシュ内の属性値が使用されます。watch はキャッシュをサポートしません。対応する属性が変更されると、応答が返されます。実行されます。
3. Computed は非同期操作をサポートしておらず、非同期操作がある場合はデータの変更を監視できませんが、watch は非同期操作をサポートします。
4. Computed は初めてロードされるときにリッスンしますが、watch はデフォルトで初めてロードされるときにリッスンしません。

    コンポーネントの作成時に実行するかどうか即時
    : true、初めてロードされるときにリッスンします (デフォルトは false)。     監視対象の属性がオブジェクトである場合、
    深い監視は推奨されません (パフォーマンスを非常に消費します)。
ディープ オブジェクトのサブ属性変更を有効にする ウォッチがオンになり
    、ディープ オブジェクト内のすべてのサブ属性変更がウォッチをトリガーします
5. computed 内の関数は return を呼び出す必要がありますが、watch は呼びません。
6. 使用シナリオ:
計算: ショッピング カートの商品決済など、1 つの属性が複数の属性の影響を受けます。
watch: 1 つのデータが複数のデータに影響を与えます (例: 検索データ)。
データ変更への応答、非同期操作、または高パフォーマンスの消費操作の実行には、監視が最適な選択です。

バインドされたクラスの配列の使用法

• オブジェクトメソッド v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
• 配列メソッド V-bind: class="[class1, class2]"
• 行内 v-bind:style="{color: color, fontSize: fontSize+'px'}"

開発でよく使われる指示は何ですか

v-show v-if v-html v-text v-model v-on v-lock v-bind

修飾子とは何ですか

イベント修飾子

• .stop はイベントが伝播し続けるのを防ぎます
• .prevent はラベルのデフォルト動作を防止します
• .capture はイベント キャプチャ モードを使用します。つまり、要素自体によってトリガーされたイベントが最初にここで処理され、次に処理のために内部要素に渡されます。
• .self は、event.target が現在の要素自体である場合にのみハンドラーをトリガーします。
• .once イベントは 1 回だけ発生します
• .passive は、イベントのデフォルトの動作を妨げたくないことをブラウザーに伝えます。

v-model の修飾子

• .lazy は、この修飾子を通じて変更イベントでの再同期に変換されます。
• .nu​​mber は、ユーザーの入力値を数値型に自動的に変換します。
• .trim ユーザーが入力した先頭と末尾のスペースを自動的にフィルタリングします。

Vue スロットには主に 3 つのタイプがあります。

デフォルトのスロット、名前付きスロット、およびスコープ付き
スロット vue のスロットは、親コンポーネントの子コンポーネントで提供されるプレースホルダーを参照します。
ラベルで示されるように、親コンポーネントはこのプレースホルダー内の任意のプレースホルダーを埋めることができます HTML などのテンプレート コード、コンポーネントなど、塗りつぶされたコンテンツはサブコンポーネントのタグを置き換えます (プレースホルダーを置き換えます)。

vモデルの原理

vue プロジェクトでは、v-model 命令は主にフォーム入力、テキストエリア、選択などの要素に双方向のデータ バインディングを作成するために使用されます。v-model は本質的に単なる糖衣構文であり、v-model は異なる入力を使用することがわかっています。要素を内部的にプロパティ化し、さまざまなイベントをスローします。

text 要素と textarea 要素は、value 属性と入力イベントを使用します。

チェックボックスとラジオは、checked 属性を使用し、イベントを変更します。

選択フィールドは値をプロパティとして受け取り、変更をイベントとして受け取ります。

入力フォーム要素を例に挙げます。

<input v-model='something'>

に相当

<input v-bind:value="something" v-on:input= "something =Sevent.target.value">

カスタム コンポーネント内の場合、v-model はデフォルトで、次のように value という名前のプロップと input という名前のイベントを利用します。

父组件:
<ModelChild v-model="message"></ModelChild>子组件:
<div>{
   
   {value}}</div>props:value:String
},
methods:{test1(){this.$emit('input','小红')},
},

Vue のライフサイクル

Vue インスタンスの作成から破棄までのプロセスをライフサイクルと呼びます。作成開始、データの初期化、テンプレートのコンパイル、DOMのマウント→レンダリング→更新→レンダリング、アンロードなどの一連の処理をvueのライフサイクルと呼びます。

関連する知識ポイント:

1) vue のライフサイクルには、作成前後、読み込み前後、更新前後、破棄前後の合計 8 つのステージがあります。

2) 最初のトリガーはいくつかのフックをトリガーします: beforeCreate が作成されました beforeMount がマウントされました

3) どのライフサイクルで DOM レンダリングが完了しているか: マウントされています

4) vue での親子コンポーネントのフックの実行順序:

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

更新：父beforeUpdate->子beforeUpdate->子updated->父updated

破棄:親の破棄前 -> 子の破棄前 -> 子の破棄 -> 親の破棄

Vue ライフサイクルの役割

vue インスタンス全体を制御するプロセスで適切なロジックを形成します。(ライフサイクル内の複数のイベントフック)

vue コンポーネント間の通信

1)vuex

2)イベントバス

3)プロップ/エミット

4)$親/$子

5)$attrs/$listeners

双方向データバインディングの原理

Vue の双方向データ バインディングは、パブリッシャー/サブスクライバー モデルと組み合わせたデータ ハイジャックによって実装されます。Object.defineProperty() を通じて各プロパティのゲッター/セッターをハイジャックします。変更によりメソッド set メソッドの割り当てがトリガーされ、取得により get メソッドの値がトリガーされ、データが変更されたときにサブスクライバーにメッセージが送信され、対応するコールバックがトリガーされ、データ ハイジャックを通じてメッセージがパブリッシュされます。

応答性とは、コンポーネントのデータが変更されると、すぐにビューの更新がトリガーされることを意味します。彼はデータ駆動型の視点への第一歩です。

vue の応答性の中心的な API は Object.defineProperty() で、Object.defineProperty を使用して get と set を書き換え、オブジェクト プロパティの代入と取得を関数に変換することで、単純な双方向バインディングを実装できます。

一方向のデータ フローと双方向のデータ バインディングについて説明する

単方向データ フロー: 名前が示すように、データ フローは単方向です。データ フローの方向を追跡でき、フローが単一であるため、問題をより迅速に追跡できます。デメリットは書きにくいことです。UI を変更するには、 action 対応する を維持するために さまざまな を作成する必要がありますstate。

双方向のデータ バインディング: データは接続されており、データを変更する操作はフレームワーク内に隠されています。利点は、多くのフォーム操作が行われるシナリオで、ビジネスに関係のない多くのコードが簡素化されることです。欠点は、ローカル状態の変化を追跡することができないことであり、そのため、エラーが発生した場合のデバッグが困難になります。

Vue コンポーネントのデータが関数でなければならない理由 

JS自体の特性上、データがオブジェクトの場合、オブジェクト自体が参照型であるため、いずれかのプロパティを変更するとvueインスタンスのデータに影響を及ぼします。データがオブジェクトを関数として返す場合、各インスタンスのデータは独立しており、相互に影響を及ぼしません。

リアル DOM と仮想 DOM

 1 回の操作で DOM を更新するためのアクションが 10 個ある場合、従来のソース API または jQuery を使用して DOM を操作すると、ブラウザーは DOM ツリーの構築を開始し、最初から最後までプロセスを実行しますが、仮想 DOM はDOM を
 すぐに操作するのではなく、これら 10 件の更新の差分コンテンツをローカルの js オブジェクトに保存し、最後にこの js オブジェクトを一度に DOM ツリーにアタッチし、ブラウザーに描画作業を実行するように通知し、その後の操作を実行します。多くの不必要な計算を避けます。

Vue におけるキーの役割

vue におけるキー値の役割は、次の 2 つのケースで考慮できます。

• 最初のケースは、v-if でキーを使用する場合です。Vue は要素を可能な限り効率的にレンダリングするため、要素を最初からレンダリングするのではなく、既存の要素を再利用するのが一般的です。したがって、v-if を使用して要素の切り替えを実装する場合、切り替えの前後に同じ型の要素がある場合、その要素が再利用されます。同じ入力要素の場合、切り替え前後でユーザーの入力がクリアされず、要件を満たしません。したがって、キーを使用することで要素を一意に識別することができ、この場合、そのキーを使用した要素は再利用されません。このとき、key の役割は独立した要素を識別することです。
• 2 番目のケースは、v-for でキーを使用する場合です。v-for を使用してレンダリングされた要素のリストを更新する場合、デフォルトで「インプレース再利用」戦略が使用されます。データ項目の順序が変更された場合、Vue はデータ項目の順序に一致するように DOM 要素を移動せず、ここで各要素を単純に再利用します。したがって、各リスト項目にキー値を提供することで、Vue は要素の ID を追跡し、効率的な再利用を実現できます。このとき、キーの機能は、仮想 DOM を効率的に更新してレンダリングすることです。

キーは Vue の vnode の一意のマークです。このキーを使用すると、diff 操作がより正確かつ高速になります。

• より正確には、キーによるインプレース多重化ではないため、sameNode 関数の a.key === b.key 比較でインプレース多重化を回避できます。したがって、より正確になります。
• 高速: キーの一意性を使用してマップ オブジェクトを生成し、対応するノードを取得します。これはトラバーサル メソッドよりも高速です。

v-for にキーを追加する必要があるのはなぜですか

キーを使用しない場合、Vue は動的要素を最小限に抑えるアルゴリズムを使用し、同じタイプの要素を可能な限りその場で変更/再利用しようとします。キーは Vue の vnode の一意のマークです。このキーを使用すると、diff 操作がより正確かつ高速になります。

より正確には、key によるインプレース多重化ではないため、sameNode 関数の a.key === b.key 比較でインプレース多重化を回避できます。したがって、より正確になります。

高速: キーの一意性を使用してマップ オブジェクトを生成し、対応するノードを取得します。これはトラバーサル メソッドよりも高速です。

ハッシュと履歴

1. Vue-router (フロントエンドルーティング) には、ハッシュモードとヒストリーモードの 2 つのモードがあります
1). ハッシュは、URL の後ろにある # 記号とそれに続く文字を指します. ヒストリーには # がありません, ハッシュモードよりも優れているように見えます
2 ). 原理の違い (原則)
3). ハッシュは IE8 と互換性があり、履歴は IE10 とのみ互換性があります
; #) の後の URL フラグメントを変更します; URL にはハッシュ パスが表示されますが、URL には表示されませんHTTP リクエストであり、バックエンドにはまったく影響しないため、ハッシュ値を変更してもページはリロードされず、基本的にハッシュを使用してフロントエンドのルーティングを実装します。

2. 原則:
1) .hash は、ブラウザの onhashchange() イベントの変更をリッスンして、対応するルーティング ルールを見つけます。

2). 履歴の原則: H5 の履歴で 2 つの新しい API PushState() と replaceState() を使用し、イベント onpopstate を使用して URL の変更を監視します。

   履歴モードの URL はバックエンドと一致している必要があるため、履歴に変更するにはバックエンドの協力も必要です。そうでない場合はエラーが報告されます。
つまり、ハッシュモードはページが更新されるたびに「#」以降を直接変更するもので、履歴が更新されるたびにバックエンドにURL全体を再リクエスト、つまりサーバーに再リクエストすることになります。バックエンドが時間内に応答しない場合、エラー 404 が報告されます。。履歴の利点は、履歴を変更できることと、バックエンドへのリクエストをすぐに開始しないことです。ただし、プロジェクトに厳密な標準要件がない場合は、ハッシュ モードを直接使用して開発できます。

(1) ハッシュ モードの実装原理
フロントエンド ルーティングの初期の実装は location.hash に基づいています。実現原理は非常に単純で、location.hash の値は URL の # 以降の内容になります。たとえば、次の Web サイトの location.hash 値は '#search' です:
https://www.word.com#search
ハッシュ ルーティング モードの実装は、主に次の特性に基づいています。

• URL のハッシュ値はクライアントの状態のみを表します。つまり、サーバーにリクエストが行われたとき、ハッシュ部分は送信されません。
• ハッシュ値を変更すると、ブラウザのアクセス履歴に記録が追加されます。したがって、ブラウザの「戻る」ボタンと「進む」ボタンを使用してハッシュの切り替えを制御できます。
• a タグを渡して href 属性を設定できます。ユーザーがこのタグをクリックすると、URL のハッシュ値が変更されます。または、JavaScript を使用して loaction.hash に値を割り当て、URL のハッシュ値を変更します。
• hashchange イベントを使用してハッシュ値の変化を監視し、それによってページをジャンプ (レンダリング) することができます。

(2) ヒストリーモードの実装原理 HTML5 では、URL の変更を実現するための History API を提供しています。その中には、history.pushState() とhistory.repalceState() という 2 つの主要な API があります。これら 2 つの API は、ブラウザの履歴を更新せずに操作できます。**唯一の違いは、以下に示すように、前者は新しい履歴レコードを追加するのに対し、後者は現在の履歴レコードを直接置き換えることです。 ** window.history.pushState(null, null, path); window. History.replaceState( null, null, path);

• 履歴ルーティング モードの実装は、主に次の特性に基づいています。
• PushState と repalceState の 2 つの API は、URL の変更を操作および実装します。
• Popstate イベントを使用して URL の変更を監視し、ページをジャンプ (レンダリング) できます。
• History.pushState() またはhistory.replaceState() は、popstate イベントをトリガーしないため、ページ ジャンプ (レンダリング) を手動でトリガーする必要があります。

Vue の初期化ページのフラッシュの問題

vue を使用して開発する場合、vue が初期化される前に、div は vue の制御下にないため、作成したコードは解析前にぼやける現象が発生しやすくなり、通常ではありますが、{{message}} のような単語が表示されます。 状況により、今回の時間は非常に短いですが、それでもこの問題を解決する必要があります。

まず、CSS に次のコードを追加します: v-cloak] { display: none;}

問題が完全に解決しない場合は、ルート要素に追加しますstyle="display: none;" :style="{display: 'block'}

Vue がオブジェクトのプロパティを動的に増やす方法

1.this.$set(this.obj,キー,値)

2.this.obj=Object.assign({},this.obj,{a:1,b:2});

ルーティング ガードのライフ サイクル

1. グローバル ルーティング ガードのライフ サイクル:

（1） router.beforeEach((to,from,next)=>{ })

有効になるまでの時間: ナビゲーションがトリガーされたとき

（2） router.beforeResolve((to,from,next)=>{ })

効果的なタイミング: ナビゲーションが確認される前、およびすべてのコンポーネントのガードと非同期ルーティング コンポーネントが解決された後

（3）router.afterEach((to,from)=>{ })

2. ローカル ルーティング ガードのライフ サイクル:

（1）beforRouteEnter(to,from,next){ }

注: レンダリングされたコンポーネントに対応するルートがインターフェイスにロードされる前に呼び出されます。ガードが実行される前にコンポーネント インスタンスが作成されていないため、「this」を使用してコンポーネント インスタンスを取得することはできません。

（2）beforeRouteUpdate(to,from,next){ }

注: 現在のルートが変更されたときに呼び出され、「this」を使用してコンポーネント インスタンスにアクセスできます。

（3）beforeRouterLeave(to,from,next){ }

注: コンポーネントに対応するルートから離れるときに呼び出され、「this」を使用してコンポーネント インスタンスにアクセスできます。

ルートとルーターの違い

経路情報の取得にはroute、ルーティングの操作にはrouterを使用します。

Vueルーター

vue-router は Vue.js の公式ルーティング マネージャーであり、Vue.js のコアと深く統合されているため、単一ページのアプリケーションを簡単に構築できます。含まれる機能は次のとおりです。

• ネストされたルート
• モジュール式のコンポーネントベースのルーティング構成
• ルートパラメータ、クエリ、ワイルドカード
• Vue.js トランジション システムに基づいたトランジション効果を表示する
• きめ細かいナビゲーション制御
• 自動アクティブ化された CSS クラスとのリンク
• ヒストリー モードまたはハッシュ モード、IE9 では自動的にダウングレード
• カスタムスクロールバーの動作

vue-router コンポーネント:

• < router-link to=""> ルート パス
• < router-link :to="{name:''lrouting name'}"> 名前付きルート
• <router-view> ルートの表示

vue-router にはどのような種類のナビゲーション フックがありますか?

1. グローバルナビゲーションフック

    1) フロントフック:

router.beforeEach((to, from, next) => {  })

    2) リアフック

router.afterEach((to,from) => {  })

2. 別配線専用フック

{
    path: '/home',
    name: 'home',
    component: Home,
    beforeEnter(to, from, next) {
        if (window.localStorage.getItem("id")) {
            next()
        } else {
            next({ name: "login" })
        }
    }
}

3. コンポーネント内のフック

beforeRouteEnter(to, from, next) {
    // do someting
    // 在渲染该组件的对应路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
    // do someting
    // 在当前路由改变，但是依然渲染该组件是调用
},
beforeRouteLeave(to, from ,next) {
    // do someting
    // 导航离开该组件的对应路由时被调用
}

グローバルパーシングガード

router.beforeResolve は、router.beforeEach と同様のグローバル ガードを登録します。

Vite パッケージングの利点

1) 高速コールドスタート

2) パッケージのコンパイル速度

3) ホットモジュールアップデート

VUEXについて話す

• state: vuex の基本データである状態を置く場所。変数を格納するために使用されます。
• Mutation:更新されたデータを送信する方法、同期
• getter:基本データ状態から派生したデータ。状態の計算されたプロパティに相当します。
• action:この関数は Mutation とほぼ同じですが、アクションが状態を直接変更するのではなく、mutation を送信する点が異なります。action には任意の非同期操作を含めることができます。
• モジュール:モジュール型 VUEX、各モジュールは独自の状態突然変異アクション ゲッターを持つことができます。

Vue2とVue3の違い

1. 応答性の高いシステムのリファクタリング。プロキシを使用して Object.defineProperty 属性を置き換えます。利点:

    - プロキシはオブジェクトの「追加/削除」プロパティを直接監視できます。

    - プロキシはアレイの変更を直接監視します

    - Proxy監視の対象はオブジェクトそのものなので、Object.definePropertyのような各プロパティを走査する必要がなく、一定のパフォーマンス向上が見込めます。

2. `Composition API` (Composition API) を追加し、ロジックの再利用とコードの編成を改善します。

    - セットアップ構成

    - リファレンスとリアクティブ

    - watch与watchEffect

    -提供して注入する

3. 仮想 DOM の再構築、diff アルゴリズム

4. ライフサイクルの名前変更

    - beforeDestroy は beforeUnmount に名前変更されました

    - destroy は unmounted に名前変更されます

// Vue3.0 は、Composition API の形式でライフサイクル フックも提供します。これは、次のような Vue2.x のフックに対応します。

vue3:onBeforeMounted=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount

beforeCreate ===> setup()

作成されました ===> setup()

beforeMount ===> onBeforeMount

マウント ===> onMounted

beforeUpdate ===> onBeforeUpdate

更新済み ===> 更新済み

beforeUnmount===> onBeforeUnmount

アンマウント ===> onアンマウント

4. 新しい組み込みコンポーネント:

    - フラグメント

    - テレポート

    - サスペンス

5. 取り外した部品:

    - v-on.keyCode 修飾子が削除され、config.keyCodes もサポートされなくなりました

    - v-on.native 修飾子を削除します。

    - フィルターを削除します

    - もうミックスインを使用することは「非推奨」です。合成関数はそれ自体でミックスインを置き換える方が良いです。

6. データと手法の定義

vue2 : data() { return {}; }、メソッド:{ }

vue3 : データとメソッドはセットアップで定義され、統合されています

戻る{}

時計と時計効果

計算プロパティとイベント メソッドの違いは何ですか

同じ関数を method または 計算されたプロパティとして定義できます。最終的な結果としては、どちらの方法でも同じです。

違い：

• computed: 計算されたプロパティは依存関係に基づいてキャッシュされ、関連する依存関係が変更された場合にのみ再評価されます。

• method:再レンダリングが発生するたびに、 method 呼び出しは常にこの関数を実行します。

複数ページのデータモジュールのデカップリングを管理する (vuex)

Vue の核心とは何ですか

データ駆動型のコンポーネント システム。

Vue の $nextTick() の機能と原理

Vue は Dom の更新時に非同期で実行され、データを変更した後すぐにビューが更新されるわけではありませんが、ループ内のすべての変更が同時に完了した後、ビューが均一に更新されます。したがって、データを変更した後、メソッド内ですぐに DOM を取得しますが、取得されるのは未変更の DOM のままです。

$nextTick は、次の DOM 更新サイクルが終了した後の遅延コールバックです。DOM更新後に自動実行

内部の機能。

$nextTickの機能: このメソッドのコードはレンダリング完了後に実行されるため、非同期レンダリングで最新のDOMが取得できない問題が解決されます。

応用シナリオ: フック関数 created() で、DOM を取得して操作したい場合は、DOM を操作するメソッドを $nextTick に置きます

MVCの説明

MVC の正式名称は Model View Controller といい、Model（モデル）-View（ビュー）-Controller（コントローラー）の略称で、ビジネスロジックを 1 つのコンポーネントにまとめ、インターフェースやユーザーインタラクションを改良・カスタマイズすることで、ビジネス ロジックを書き直す必要はありません。MVC は、従来の入力、処理、出力機能を論理 GUI 構造にマッピングするために独自に開発されました。

ほとんどすべてのアプリは、ユーザーにデータを表示し、インターフェイス上でユーザーの操作を処理するという 1 つのことだけを行います。
MVC の考え方: 一文で説明すると、コントローラーはモデルのデータをビューで表示する、つまりモデルのデータをコントローラー内のビューに割り当てる責任がある、ということです。

MVVM

MVVM：モデル、ビュー、ビューモデル。

無意識のうちに MVC と比較すると、MVVM には ViewModel が 1 つ多く、Controller が少ないことがわかります。

まず、追加の ViewModel (ビデオ メモリではなく VM) について話しましょう。
VM の意味は、モデルと同様にデータにあります。
モデルはデータのフェッチと保存を担当しますが、データのフェッチと保存に加えて、解析という非常に重要な操作もあります。
 

MVVMパターン

MVVM の核となる考え方は、モデルの変更に注意を払い、MVVM フレームワークに独自のメカニズムを使用させて DOM を自動的に更新させることです。これはいわゆるデータビュー分離であり、データは影響を受けません。景色。(view{ページ}-model{データ}-modelview{ブリッジビューとデータ間の変換処理})

1) MVVMはデータとページの双方向バインディングを実現します

2) MVVM は、ページのビジネス ロジックとレンダリングの間の分離、およびデータとビューの分離を実現し、コンポーネントで開発できます。

3) VUE は MVVM のアイデアをどのように具体化しますか: Mustache 構文はデータとビューのバインディングを実現します; v-on イベント バインディング、データがイベントを通じて操作されると、それに応じて v-model が変更されます。

MVCの説明

 MVC の正式名称は Model View Controller といい、Model（モデル）-View（ビュー）-Controller（コントローラー）の略称で、ビジネスロジックを 1 つのコンポーネントにまとめ、インターフェースやユーザーインタラクションを改良・カスタマイズすることで、ビジネス ロジックを書き直す必要はありません。MVC は、従来の入力、処理、出力機能を論理 GUI 構造にマッピングするために独自に開発されました。

ほとんどすべてのアプリは、ユーザーにデータを表示し、インターフェイス上でユーザーの操作を処理するという 1 つのことだけを行います。
MVC の考え方: 一文で説明すると、コントローラーはモデルのデータをビューで表示する、つまりモデルのデータをコントローラー内のビューに割り当てる責任がある、ということです。

MVVM

MVVM とは MVVM
: モデル、ビュー、ビューモデル。

無意識のうちに MVC と比較すると、MVVM には ViewModel が 1 つ多く、Controller が少ないことがわかります。

まず、追加の ViewModel (ビデオ メモリではなく VM) について話しましょう。
VM の意味は、モデルと同様にデータにあります。
モデルはデータのフェッチと保存を担当しますが、データのフェッチと保存に加えて、解析という非常に重要な操作もあります。