應用程式開發中經常聽到的”MVVM”是什麼?淺顯易懂的解說!


在應用程式開發中經常聽到的”MVVM”,
其基本概念在這裡簡單整理了。

也介紹了在Flutter中實現的程式碼範例。

MVVM的概要

MVVM(Model-View-ViewModel)是,
將應用程式的邏輯和UI(使用者介面)分開,
以提高開發效率和維護性的軟體設計方法。

它是一種根據”畫面顯示”、”資料操作”、”資料定義”等角色設計的手法。
類似的概念還有MVC等方法。

MVVM的構成要素

MVVM的構成包含ModelViewViewModel三個部分。

View
 用戶可見的UI部分
 顯示的資料從ViewModel獲取
 在Flutter中,由Widget表現

ViewModel
 負責應用程式的複雜邏輯部分
 處理(計算或判斷等)提供給View的資料
 資料從Model獲取

Model
 負責資料的定義及資料的CRUD操作

Repository(補充
 用於獲取初始資料和保存持久資料。
 進行DB的CRUD操作和資料處理,並將資料傳遞給ViewModel。

CRUD,是指
「Create(創建)」「Read(讀取)」「Update(更新)」「Delete(刪除)」的
首字母縮寫。這些處理的總稱。

MVVM各要素之間的關係

構成要素之間的關係如下所示。

在Flutter中,使用Riverpod等檢測狀態變化的實現。
通過使用Riverpod,可以檢測ViewModel或Model狀態變化,
並使畫面重新繪製。

MVVM的優點

MVVM的最大優點在於,顯示(View)、操作(ViewModel)、資料(Model)
分離,使得每個部分變得簡單,易於管理。

但是,缺點是如果Model有變更,可能會影響到ViewModel和View,
反而可能增加變更範圍。

MVVM及Repository的程式碼範例和說明

以下是使用Riverpod實現的Flutter中的MVVM範例。

// User模型
class User {
  final String name;
  final String email;
  User(this.name, this.email);
}

// Repository
// 實際上是從DB或API獲取資料,但這裡返回的是固定值的資料
class UserRepository {
  Future<User> fetchUser() async {
    return User('Goda Takeshi', 'Jaian@com');
  }
}

// UserViewModel
final userProvider = FutureProvider<User>((ref) async {
  final repository = UserRepository();
  return repository.fetchUser();
});

// UserView
class UserView extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final user = ref.watch(userProvider);
    return Scaffold(
      appBar: AppBar(title: Text('MVVM Example')),
      body: user.when(
        data: (user) => Text('User Name: ${user.name}'),
        loading: () => CircularProgressIndicator(),
        error: (e, stack) => Text('Error: $e'),
      ),
    );
  }
}

UserView透過「final user = ref.watch(userProvider)」監視userProvider
userProvider中,User類定義了型別,並呼叫UserRepository
UserRepository返回固定值,但實際應用中將從DB或API獲取或更新資料。

最後

介紹了MVVM的設計。
在Flutter的設計中,MVVM並不是絕對好的方法,應根據應用或項目
選擇合適的設計方法。

希望通過本文,能對MVVM有更深入的理解,
並使採用此設計方法的應用程式變得更易讀。

标题和URL已复制