# vue響應式原理解析
首先定義了四個核心的js檔案
- 1. observer.js 觀察者函式，用來設定data的get和set函式，並且把watcher存放在dep中
- 2. watcher.js 監聽者函式，用來設定dep.target開啟依賴收集的條件，和觸發檢視的更新函式
- 3. compile.js 編譯者函式，用來編譯模版和例項化 watcher 函式
- 4. index.js 入口檔案
注意dep函式就是乙個殼子，用來存放watcher和觸發watcher更新的
首先從index.js開始，定義函式 selfvue
```js
function selfvue (options) );
observe(this.data); //觀察this.data，設定好各種監聽的規則
new compile(options.el, this);//在這裡處理編譯和呼叫watcher的函式
options.mounted.call(this); // 所有事情處理好後執行mounted函式
}```
然後看 observe函式：
```js
definereactive: function(data, key, val)
return val;
},set: function setter (newval)
val = newval;
dep.notify();
}});
}```
然後看watcher
```js
function watcher(vm, exp, cb) */}
watcher.prototype =
}```
這樣每次 new watcher的時候就會例項化watcher
然後就會呼叫this.value = this.get();
然後就會執行 this.vm.data[this.exp]
就會呼叫觀察者函式中的 get方法，由於此時設定了dep.target
所以就會儲存watcher到dep中
```js
new watcher(this.vm, exp, function (value) );
```再來看compile.js中是何時觸發監聽watcher函式的，該檔案做了三件事情：
```js
this.fragment = this.nodetofragment(this.el); //獲取掛載元素為**片段
this.compileelement(this.fragment);//劃分該**片段的型別，執行編譯
```所以核心**是compileelement函式：
```js
.slice.call(childnodes).foreach(function(node) \}/;
var text = node.textcontent;
if (self.iselementnode(node)) else if (self.istextnode(node) && reg.test(text))
if (node.childnodes && node.childnodes.length)
});```
迴圈遍歷模板**，按照：文字節點、v-model指令、v-on:click方法做不同的邏輯處理：
但是都會用到該函式
```js
new watcher(this.vm, exp, function (value) );
```如上所述，例項化 watcher的時候，就是給模板中用到的exp，向dep中增加watcher函式，
而watcher函式包括的方法：更新和get函式。
所以遍歷完模板後，例項化 watcher，然後就會執行 watcher 中的get函式，實現監聽功能。
```js
watcher.prototype =
},get: function()
};```
---待資料發生變化時，會觸發觀察者函式中的 set 函式：
```js
set: function setter (newval)
val = newval;
dep.notify();
}```
然後就會通知dep更新,這裡注意的是，如果該值沒有在模板中使用，this.sub就是空陣列，所以這裡通知函式中也不會更新檢視：
```js
notify: function() );
}```
如果模板中使用了兩次data中的title：
則對data迴圈後，針對title變數，有兩個watcher，存在針對該data值：title的this.sub陣列中。
所以如果沒有在模板中使用到的data，比如age變數，
在set函式中，由於模板中沒有用到-->則不會執行new watcher-->則不會賦值給dep.target-->則不會給 dep中收集依賴，儲存watcher；
在get函式中，由於模板中沒有用到，對應的dep.sub陣列中就是空陣列。所以即使set函式通知了dep.notify函式，也會應為是空陣列，導致不會執行迴圈，也無法觸發watcher的更新檢視函式
vue響應式資料的實現原理解析
今天講下vue的響應式資料，也就是mvvm雙向繫結模式，主要的目的是要讓大家了解該模式在vue中是如何實現的，所以將以極簡的 進行示例。我們先假設這樣的乙個使用情景 type text v model text 複製 let vm new vue 複製 這裡就涉及到了vue的雙向繫結。接下來我就用一...
Vue響應式原理深入解析
vue最明顯的特性之一便是響應式系統，其資料模型即是普通的 j ascript 物件。而當你讀取或寫入它們時，檢視便會進行響應操作。響應式data div id exp div const vm new vue vm.message this is b 響應式 vm.message this is ...
簡單理解vue響應式原理
通過object.defineproperty監聽物件屬性的改變 const obj object.keys obj foreach key get 發布訂閱者模式 當資料發生改變時呼叫的地方也跟著改變 發布者 class dep addsub wather notify 訂閱者 class wat...