Web インタビュー: MVC と MVVM の違いと、Vue が MVVM に完全に準拠していない理由

Web インタビュー: MVC と MVVM の違いと、Vue が MVVM に完全に準拠していない理由

MVCとMVVMの違い

前述の

まず、これら2つは単なる考え、デザインパターンです

多くのプログラミング言語では、Java の SpringMVC、PHP の ThinkPHP、JavaScript の Vue、React、Angular など、この考えに基づいて多くのフレームワークが設計されています。

MVCC の

概要

1. データはビューにレンダリングされる必要がある
テンプレートエンジンの定義
データを取得する
次にデータをテンプレートエンジンにレンダリングします

2. ビューアクションコントローラ
ページ上のボタンにクリックイベントを追加する
イベント内でのメソッドの呼び出し
コントローラはデータを変更する要求を送信します

3. メソッドを通じてデータを変更するネットワークリクエストを送信する
次に、変更されたデータを取得するためにネットワークリクエストを送信します。
次にデータをビューにレンダリングします

長所と短所

アドバンテージ:

結合を減らし、コードの保守と拡張を容易にする

欠点:

データが更新されるたびに DOM を操作する必要があり、開発効率に影響します。

MVVM

概要

序文

開発効率を向上させるために、MVVM という新しいアイデアが登場しました。最大の特徴は双方向データバインディングです。

M のデータが変更されると、V のデータも自動的に変更されます。V のデータが変更されると、M のデータも自動的に変更されます。

MVVM は MVC の進化版であり、MVC の代替です。

特徴:

Mが変わると、Vも自動的に変わるVが変わると、Mも自動的に変わる

関係:

Mが変更されると、VMはMの変更を検出し、Vを自動的に変更します。

Vが変化すると、VMはVの変化を検出し、Mを自動的に変更します。

MVVH を使用すると、すべての DOM 操作が VM によって実行されるため、プログラマーの作業負荷が軽減されます。プログラマーは、DOM 操作ではなくビジネス ロジックに多くの時間を費やすことができます。

MVVM 実装者 — Vue

ここに画像の説明を挿入

Vue が MVVM に完全に準拠していないのはなぜですか?

ここに画像の説明を挿入

元の言葉はVue公式サイトの著者の声明から来ていますが、著者は理由を述べていません。私自身の調査と整理によると、理由は2つあると思います

理由 1: MVVM は「Model-View-ViewModel」を参照し、「モデル」と「ビュー」を完全に分離する必要がありますが、Vue は ref プロパティを提供しており、これを通じて DOM オブジェクトを取得し、ビューを直接操作できます。これは mvvm に違反します。

理由2:下図に示すように、構造上、「データ層」は「データモデル層」に含まれており、2つの部分は完全に独立していません。

ここに画像の説明を挿入

以上がWeb面接におけるMVCとMVVMの違いと、VueがMVVMに完全準拠していない理由の回答の詳しい内容です。MVCとMVVMの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください!

以下もご興味があるかもしれません:
  • Vue.js と MVVM に関するメモ
  • Vue における MVVM 実装原理の簡単な分析
  • JavaScript フロントエンド開発の MVC と MVVM 構造についての簡単な説明
  • vue の mvvm モードの説明
  • VueにおけるMVVMの原理と実装方法の詳細な説明

<<:  UA による Web サイトのクロールを防ぐ Nginx のクローラー対策戦略

>>:  Explainキーワードに基づいてMySQLインデックス機能を最適化する方法

推薦する

純粋な CSS3 で水平無限スクロールを実装するためのサンプル コード

この記事の例はすべて小さなプログラムで書かれていますが、実装される機能には影響しません。 wxmlル...

MySQL DEFINER の使用方法の詳細な説明

目次序文: 1.DEFINERの簡単な紹介2. いくつかの注意点要約:序文: MySQL データベー...

JavaScript の組み込み Date オブジェクトの詳細な説明

目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...

フロントエンドの状態管理(パート2)

目次1. 再出発1.1. ストア(司書) 1.2. 状態(書籍) 1.3. アクション(図書貸出リス...

koa2 サービスに SSL を設定する方法

I. はじめに1: SSL証明書私のドメイン名は Tencent Cloud にあります。第 3 レ...

Linux のよく使うコマンドの使い方を詳しく解説(第 2 回)———— テキストエディタのコマンド vi/vim

vi/vim の紹介どちらもマルチモード エディターです。違いは、vim が vi のアップグレー...

登録フォームのデザインルール

随分前に「Patterns for Sign Up & Ramp Up」を読み終えました。今...

JavaScript BOM の説明

目次1. BOMの紹介1. JavaScriptは3つの部分から構成される2.ウィンドウオブジェクト...

MySQL Group by最適化の詳細な説明

目次標準的な実行プロセス最適化並べ替えを削除並べ替え成し遂げる要約する標準の Group by ステ...

フォームの「Enter」、「Submit」、「Enter != Submit」を削除する方法

「Enter != Submit」問題を実装するには、通常、「ボタンの種類」と「入力ボックスの数」か...

MySQL のロングトランザクション例の詳細な説明

序文: 「MySQL 入門」シリーズの記事は終了しました。今後も引き続き MySQL に焦点を当て、...

Linux での MySQL 5.6.33 のインストールと設定のチュートリアル

このチュートリアルでは、LinuxでのMySQL 5.6.33のインストールと設定方法を参考までに紹...

入力のsize属性とmaxlength属性の違い

最近、プロジェクトで input size 属性と maxlength 属性を使用しました。以前は、...

MySQL 8.0.20でNavicatをインストールして接続する方法と注意すべき点

注意事項1. まず、mysql インストール ディレクトリに次の内容の my.ini ファイルを作成...

MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...