第三篇提到，Listener 和 State Machine 之間並非直接溝通，而是透過資料串起來的。
這篇就來說清楚那筆資料的管理機制：View Model。
這篇是整個系列裡最抽象、最陌生、初學者最容易卡住的地方，但也是最值得搞懂的一篇。融會貫通之後，你對 Rive 的理解就會從「會操作工具」升級到「真正看懂整個系統在做什麼」。
View Model 是什麼？
View Model 是一組資料的藍圖，定義了這組資料的結構該長什麼樣子。
簡單來說，你可以把 View Model 想像成一張表格，像是初診單、報名表、入住登記表……
以初診單為例，院方想要知道病人的某些特定資料，像是：
．姓名（文字）
．年齡（數字）
．住址（文字）
．是否抽菸？（是／否）
所以就預先在表格上印好了這些欄位，讓病人去填上這些資料即可。
View Model 就像是一張空白的初診單。它還沒有內容，但它已經定義好了「需要哪些資料」。
也就是說，「資料叫什麼」、「每筆資料是什麼類型 」。
而且同一張空白表格可以印很多份，每個人填進不同的內容。每一份填好的表格，就是 Rive 中的 View Model Instance。
View Model 決定格式，每個 Instance 則存放實際的資料──內容不同，格式一樣。
你在用 Rive 的時候可能沒注意到這個差別，因為你建立 View Model 時，Rive 會自動幫你建一個預設的 Instance。
所以你一開始用的，其實是那個 Instance，而不是 View Model 本身。
Instance 我們先講到這裡就好！😬
只要記得：View Model 是空白表格，Instance 是填好的那一份。
View Model 定義資料的格式，View Model Instance 存放這些資料的實際數值。
View Model 長什麼樣子？
在 Rive 裡，View Model 長這樣：
你可以定義 Number、String、Boolean、Color、Trigger 等不同類型的資料。
如果把剛才的初診單用 Rive 的 View Model 來表示，會長這樣：
在第一篇中，我們舉了一個按鈕動畫的例子：
．當滑鼠移進來，按鈕 scale 變大；
．當滑鼠移出去，按鈕 scale 恢復原來大小；
．當滑鼠點擊，按鈕 scale 發生回彈。
要實現這些互動，系統需要知道兩件事：
1. 滑鼠有沒有移入？我們需要一個 Boolean 來記錄滑鼠目前是否在按鈕上面。
2. 按鈕有沒有被點擊？我們需要一個 Trigger 來記錄點擊這個瞬間的事件，它不像 Boolean 會一直維持 true 或 false，而是觸發一次就結束。
這些就是需要被記錄的資料，所以這顆按鈕的 View Model 會長這樣：
這就是你為這顆按鈕定義的「資料藍圖」。
同時，Rive 會自動幫你建一個預設的 Instance，讓你馬上就能開始用。
為什麼叫 View Model？
第三篇中，我們提到了手機上的天氣 App，畫面顯示「東京，29°C，晴朗」。
想像一下，工程師拿到氣象局的資料之後，必須自己在程式碼裡……
1. 找到畫面上的溫度欄位，把 29° 塞進去
2. 找到城市欄位，把「東京」塞進去
3. 找到天氣圖示，把太陽圖換上去
……每一個元素都要手動對接。
這時候如果設計師把溫度的欄位從畫面左邊搬到右邊、或是改了欄位的名稱，工程師的程式碼就找不到目標，直接壞掉。
反過來，工程師改了資料格式，畫面也可能跟著出錯。
兩邊綁在一起，互相牽制。
MVVM
軟體開發裡，為了解決這個問題，發展出一套叫 MVVM（Model-View-ViewModel）的模式。
核心想法是：把畫面和資料分開，中間放一層專門負責對接的東西。
View 指的是畫面——使用者實際看到的介面。
Model 指的是真實資料本身——氣象局回傳的溫度、天氣狀況，這些來自伺服器或資料庫的原始資料。
View Model 就是中間那一層——它定義了「需要哪些資料」。
（View Model 這個名字是故意從 View 和 Model 拼出來的——它是專門為 View 服務的 Model）
有了這一層之後，設計師就可以把畫面上的元素和每筆資料一一對應起來：
城市欄位對應城市名稱，溫度欄位對應溫度的值……等等。
這個「對應」的動作，就叫做資料繫結（Data Binding）。
Data Binding
一旦 Data Binding 建立好，工程師那邊只要把真實資料接上 View Model，完全不需要碰畫面。
只要 View Model 的資料一變，畫面就自動更新，不需要任何人再手動去找欄位塞值。
View Model 就像是一份設計和工程都同意的合約，雙方透過這份合約對接，各自獨立作業，不用互相等待。
而且 Data Binding 可以是雙向的。
不只是資料變了，畫面跟著更新，即 View Model → View 這個方向；
也可以反過來，使用者在畫面裡做了什麼操作，資料也跟著更新回去，即 View → View Model 這個方向。
以購物 App 為例。
當你按下「+」按鈕，把商品數量從 1 改成 2，這個操作會更新 View Model 裡的數量，這是 View → View Model 的方向。
而 View Model 裡的數量一改變，畫面上所有綁定這筆資料的地方，像是
．小計
．購物車圖示上的數字
．結帳頁的總金額
……都會跟著同步更新。這是 View Model → View 的方向。
在 Rive 裡，View Model 定義的資料不只是畫面上看得到的（像城市名稱、溫度），也包括畫面下看不到的（像 State Machine 判斷用的 Boolean 和 Trigger）。
不管看得到還是看不到，都定義在 View Model 裡。
如果以上你都能搞懂的話，你超猛。
到這裡，你已經認識了 State Machine、Listener、View Model，但這一切目前都還在 Rive 的編輯器裡。
下一篇，我們會介紹 Runtime——讓你做的東西真正跑在使用者裝置上的執行環境。
不過在那之前，還有一篇加碼的特別篇，我們會把 Listener、State Machine 和 View Model 串在一起。別跳過，因為 View Model 的概念就是在那篇才真正融會貫通！