MVVM、資料的雙向綁定、資料的響應式

一.MVVM

1：什麼是MVVM

• Model代表模型：用來修改資料和處理業務邏輯；
• View代表視圖：是使用者在螢幕上看到的結構、布局和外觀（UI）；
• ViewModel是視圖模型：就是一個同步器，用來同步view和model的一個對象。在MVVM架構下，view和model之間是沒有直接聯系的，他們是通過ViewModel進行互動的。

2：MVVM模式

• MVVM是一種設計思想，實作了資料的雙向綁定，當改變了model的資料，view會自動更新；改變view時，model的資料也會自動更新。（它是在單向綁定的基礎上，給可輸入元素input、textare等添加了input/change事件，通過觸發事件來動态修改model）【v-model文法糖】
• ViewModel的實作原理是通過資料劫持（Object.defineProperty）【響應式】

3：MVC和MVVM的差別

1. MVC中Controller(控制器)演變成MVVM中的ViewModel
2. MVVM通過資料來顯示視圖層而不是節點操作
3. MVVM主要解決了MVC中大量的dom操作使頁面渲染性能降低,加載速度變慢,影響使用者體驗

二：資料的雙向綁定（v-model指令）

1.v-model的原理：v-bind資料綁定 與 v-on處理函數綁定的文法糖

<input v-model="value">

<input v-bind:value="value" v-on:input="value=$event.target.value">
           

2.想要v-model生效，它必須：

1. 接收一個value屬性：data => DOM

   屬性綁定（v-bind）：把data的值綁定到元素上，用于顯示資料

2. 在value值改變的時候，觸發input事件：DOM => data

   事件綁定（v-on）：對元素綁定一個事件，當值變化後把資料傳遞給控制層，進而來影響資料層

// 子元件：<Input>
<input :value="fuVal" @input="changeValue($event)">

changeValue(event) {
	this.$emit('changeFu', event.target.value);  // 調用父元件的 changeFu 方法，并将值傳給父元件
}
           

// 父元件：
<Input  :fuVal="123" @changeFu="changeFu" />

changeFu(val) {
	console.log(val);
}
           

三：資料的響應式

1. 資料的響應式是單向的：資料的變化導緻頁面的變化（data => dom）
2. 它是通過Object.defineProperty()來實作的

   響應式的核心：它在内部通過 Object.defineProperty API 劫持資料的變化，在資料被通路的時候收集依賴，然後在資料被修改的時候通知依賴更新