關於學習Vue和iOS的MVVM異同

Yang1492955186752發表於2017-12-13

最近在學前端框架Vue.js,Vue.js 是一個提供了MVVM 風格的雙向資料繫結的Javascript 庫,專注於View 層。它的核心是MVVM 中的VM,也就是ViewModel。 在Vue中,想構造一個VM只需要直接構建一個Vue的例項 假如有一段HTML,給一個input控制元件宣告一個v-model標籤,Vue就知道這是一個input所輸入的內容就是對應data的message屬性。

<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
複製程式碼
var vm = new Vue({
//vm的掛載點
el: '#app',
data: {
message:"this is a message"
},
...
})
複製程式碼

這樣,就連線了DOM(View)和data(Model),當輸入框改變內容後,data.message的值也會對應改變,而改變data.message也會對應改變輸入框的內容。 Vue的雙向繫結是基於Object.defineProperty()來劫持各個屬性的setter,getter,在資料變動時釋出訊息給訂閱者,觸發相應的監聽回撥。 當所監聽的屬性被改變後,會觸發setter,從而讓監聽者收到回撥。 寫了一些Vue標準格式的檔案後,感覺Vue的MVVM和iOS的還是有一點差異的。 首先,在.vue為字尾的檔案中,VM的行為一般是在<script></script>中,裡面有不可變的property,是作為父節點檢視傳過來的資料,還會有可變的data,作為該元件自身的變數。以及其他比如:methods類似於Objective-C中類裡面的方法,watch類似於KVO,components子元件,以及元件生命週期的方法beforeCreate等。而View也就是html和css的合集。他們全在一個檔案內部。而在iOS椎中,普遍把VM抽出來放在一個檔案中。 其次,由於iOS中ViewController的特殊性(本身和View耦合),VM的主要功能是將網路請求,和資料計算抽離出來,功能比Vue的要少。所以最好的做法是通過-(void)loadView重寫ViewController的view,達到從ViewController中剝離View的目的。然後在ViewController中寫上ViewModel的邏輯。

相關文章