搞懂：MVVM模型以及VUE中的資料繫結資料劫持釋出訂閱模式
阿新 • • 發佈：2020-05-20
## 搞懂：MVVM模式和Vue中的MVVM模式
### MVVM
* MVVM ： `model - view - viewmodel`的縮寫，說都能直接說出來 `model`：模型，`view`：檢視，`view-Model`：檢視模型
* V：檢視，即瀏覽器最前端渲染的頁面
* M：模型，資料模型，就是後端頁面渲染依賴的資料
* VM：稍後再說，因為暫時還不知道怎麼工作，什麼場景，直接解釋有點沒用
* 那就先說說前端場景：
* 如果資料改變，想要前端頁面做出相應的改變，有幾種方法：
* 1.使用原生js
```javascript
var dom = document.getElementById('xxx')
dom.value = xxx; // 直接修改值
dom.innerHtml = xxx; //改變開始 和 結束標籤中的html
```
* 2.使用jquery
```javascript
$('#name').text('Homer').css('color', 'red');
```
* 上面可以看出來，jquery確實在dom操作方面簡化了很多，鏈式呼叫和更加人性化的api在沒有mvvm模型出世之前，使用率極高
* 但是，也可以看出來，資料和頁面檢視之間存在斷層，資料影響檢視，甚至是檢視中的節點改變資料，這都是極其頻繁的頁面操作，雖然一再簡化這個面向過程的邏輯操作，但是還是避免不了手動修改的弊端。
* 有沒有一種更好的方式，可以實現這種檢視(`view`)和模型(`model`)之間的關係
* VM:
* 再看看現在VUE框架中怎麼做到這種檢視和模型的聯動
```javascript
//html
//script
export defaults{
data:function(){
return {
val:''
}
}
}
```
很簡單，很常用的v-model指令，那麼在input值修改的時候，data中的val變數值也會改變，直接在js中改變val的值的時候，input中的value也會改變？？我們做了什麼，我們怎麼將資料和檢視聯絡起來的？自動會關聯這兩個東西
* 可能，這就是VM吧~
* vm：viewModel檢視模型，就是將資料model和檢視view關聯了起來，負責將`model`資料同步到`view`顯示，也同時把`view`修改的資料同步到`model`，我們無需關心中間的邏輯，開發者更多的是直接操作資料，至於更新檢視或者會寫model，都是我們寫好的檢視模型(`viewModel`)幫我們處理
* 概念：檢視模型層，是一個抽象化的邏輯模型，連線檢視（`view`）和模型（`model`），負責：資料到檢視的顯示，檢視到資料的回寫
### VUE中的MVVM（雙向繫結）
vue框架中雙向繫結是最常用的一個實用功能。實現的方式也網上很多文章，vue2.x是Object.DefineProperty,vue3.x是Es6語法的`proxy`代理語法
* 具體是怎麼做到的
ps:暫時先看vue2.x
* Object.setProperty(),設定和修改Javascript中物件屬性值，定義物件屬性的get和set方法，可以在物件獲取值和修改值時觸發回撥函式，實現資料劫持，並且拿到新的改變後的值
* 需要根據初始化物件值和修改之後拿到改變後的值，對已繫結模板節點進行資料更新。
* 第一步：監聽物件所有屬性值變化(`Observer`)
```javascript
var data = {test: '1'};
observe(data);
data.test = '2'; // changed 1 --> 2
function observe(data) {
if (!data || typeof data !== 'object') {
return;
}
// 取出所有屬性遍歷
Object.keys(data).forEach(function(key) {
defineReactive(data, key, data[key]);
});
};
function defineReactive(data, key, val) {
observe(val); // 監聽子屬性
Object.defineProperty(data, key, {
enumerable: true, // 可列舉
configurable: false, // 防止重複定義或者衝突
get: function() {
return val;
},
set: function(newVal) {
console.log('changed ', val, ' --> ', newVal);
val = newVal;
}
});
}
```
* 第二步：怎麼做到對有繫結關係的節點進行更新和初始化值呢？如果一個數據物件綁定了多個dom節點，怎麼統一通知所有dom節點呢，這就需要用到釋出者-訂閱者模式
* 這裡是Observer作為一個察覺資料變化的釋出者，發現數據變化時，觸發所有訂閱者（`Watcher`）的更新`update`事件，首先要擁有一個能儲存所有訂閱者佇列，並且能通知所有訂閱者的中介軟體（`訊息訂閱器Dep`）
```javascript
function Dep () {
// 訂閱者陣列
this.subs = [];
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
notify: function() {
//通知所有訂閱者
this.subs.forEach(function(sub) {
sub.update();
});
}
};
```
* 並且在觀察者`Observer`中修改當Object物件屬性發生變化時，觸發`Dep`中的notify事件，所有訂閱者可以接收到這個改變
```javascript
function defineReactive(data, key, val) {
observe(val);
var dep = new Dep();
Object.defineProperty(data, key, {
enumerable: true,
configurable: false,
get: function() {
return val;
},
set: function(newVal) {
//修改的在這裡
if(newVal === val){
return
}
// 如果新值不等於舊值發生變化，觸發所有訂閱中介軟體的notice方法，所有訂閱者發生變化
val = newVal
console.log('changed ', val, ' --> ', newVal);
dep.notify();
}
});
}
```
* 但是有沒有發現還有一個問題，Dep訂閱中介軟體中的訂閱者陣列一直是空的，什麼時候把訂閱者新增進來我們的訂閱中介軟體中間，哪些訂閱者需要新增到我們的中介軟體陣列中
* 1.我們希望的是訂閱者Watcher在例項化的時候自動新增到Dep中
* 2.有且僅有在第一次例項化的時候新增進去，不允許重複新增
* 3.由於Dep在釋出者資料變化時會觸發所有訂閱則的update事件，所以Watcher例項（訂閱者）能夠觸發update事件，並進行相關操作
* 怎麼能讓Watcher在例項化的時候自動新增到Dep訂閱者陣列中
```javascript
function Watcher(vm, exp, cb) {
this.cb = cb; // 建構函式中執行，只有可能在例項化的時候執行一遍
this.vm = vm;
this.exp = exp;
this.value = this.get(); // 將自己新增到訂閱器的操作---HACK開始
// 在建構函式中呼叫了一個get方法
}
Watcher.prototype = {
update: function() {
this.run();
},
run: function() {
var value = this.vm.data[this.exp];
var oldVal = this.value;
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value, oldVal);
}
},
get: function() {
//get方法中首先快取了自己本身到target屬性
Dep.target = this;
// 獲取了一下Observer中的值，相當於呼叫了一下get方法
var value = this.vm.data[this.exp]
// get 完成之後清除了自己的target屬性？？？
Dep.target = null;
return value;
}
//很明顯，get方法只在例項化的時候呼叫了，滿足了只有在Watcher例項化第一次的時候呼叫
//update方法接收了釋出者的notice 釋出訊息，並且執行回撥函式，這裡的回撥函式還是通過外部定義（簡化版）
//但是，好像在get方法中有一個很神奇的操作，快取自己，然後呼叫Observer的getter，然後清除自己
//這裡其實是一步巧妙地操作把自己新增到Dep訂閱者陣列中，當然Observer 的getter方法也要變化如下
};
//Observer.js
function defineReactive(data, key, val) {
observe(val);
var dep = new Dep();
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
if (Dep.target) {.
dep.addSub(Dep.target); // 關鍵的在這裡，當第一次例項化時，呼叫Watcher的get方法，get方法內部會獲取Object的屬性，會觸發這個get方法，在這裡將Watcher 新增到Dep的訂閱者陣列中
}
return val;
},
set: function(newVal) {
if (val === newVal) {
return;
}
val = newVal;
dep.notify();
}
});
}
Dep.target = null;
```
* 看似好像釋出者訂閱者模式實現了，資料劫持也實現了，在資料改變的時候，觸發Object.setProperty中定義的set函式，set函式觸發Dep訂閱者中介軟體的notice方法，觸發所有訂閱者的update方法，並且訂閱者在例項化的時候就加入到了Dep訂閱者的陣列內部，讓我們來看看怎麼用
* html部分，
```html