1.目前雙向數(shù)據(jù)綁定的方法
????發(fā)布者-訂閱者模式（backbone.js）
? ? ? ? 因為本文研究的不是這個序臂，所以不做詳細解釋贞让。
? ? 臟檢查(Angular.js)
? ? ? ? angular只在指定的事件觸發(fā)時進入臟值檢測哈恰，例如：DOM事件、XHR響應(yīng)事件吠冤、location變更事件电谣、timer事件秽梅、執(zhí)行$digest()/$apply()
? ? 數(shù)據(jù)劫持(vue)
????????vue是采用數(shù)據(jù)劫持$發(fā)布者-訂閱者結(jié)合的方式，來做數(shù)據(jù)綁定剿牺，核心就是Object.defineProperty()风纠，劫持各個屬性的getter和setter，在數(shù)據(jù)模型變化的時候牢贸，發(fā)布消息給訂閱者（綁定了數(shù)據(jù)模型的DOM元素）竹观，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
??
2.簡單例子實現(xiàn)數(shù)據(jù)綁定
? ? obj.name根據(jù)輸入框值得變化改變，視圖會根據(jù)obj.name的改變進行更新臭增。這就是簡單的實現(xiàn)了view=>model和model=>view的雙向數(shù)據(jù)綁定懂酱。這是vue的基本原理，但是在vue 中并不是這么實現(xiàn)的誊抛。
3.vue實現(xiàn)數(shù)據(jù)綁定的能分解步驟
（1）要將視圖模型和數(shù)據(jù)模型綁定起來
（2）視圖變化時列牺，觸發(fā)數(shù)據(jù)模型變化
（3）數(shù)據(jù)模型變化時，觸發(fā)視圖變化
4.流程圖
????在實例化一個Vue對象的時候拗窃，會傳進去一個data對象瞎领，之后分成兩個進程，一個進程是對掛載目標元素模板里的v-model和{{ }}随夸；兩個指令進行編譯九默。另一個進程是對傳進去的data對象里面的數(shù)據(jù)進行監(jiān)聽。
? ? 上圖中宾毒，observe是利用Object.defineProperty()對傳入的data對象進行數(shù)據(jù)監(jiān)聽驼修，在數(shù)據(jù)改變的時候觸發(fā)該屬性的set方法，更新該屬性的值诈铛，并發(fā)布消息乙各，我（該屬性）的值變了。
? ? compile是編譯器幢竹，找到vue的指令v-model所在的元素耳峦，將data中該屬性的值賦給元素的value，并給這個元素添加二級監(jiān)聽器焕毫，在元素的值改變的時候妇萄，將新值賦給data里面同名屬性，這個時候就完成了單向數(shù)據(jù)綁定咬荷，視圖 >> 模型。
????那么最終的由模型到視圖的更新轻掩，依賴于dep和watcher幸乒，dep會收集訂閱者，就是綁定了data里面屬性的元素唇牧，在數(shù)據(jù)更新的時候罕扎，會觸發(fā)該屬性的set方法，在set里觸發(fā)該屬性的消息發(fā)布通知函數(shù)丐重。而Watcher根據(jù)收到的數(shù)據(jù)變化通知腔召，更新相應(yīng)的數(shù)據(jù)。
????dep這個東東給大家解釋一下扮惦，就是data里的每個屬性都有一個dep對象臀蛛，dep對象里可以有很多訂閱者（watcher），但是只有一個添加訂閱者的方法和一個發(fā)布變化通知的方法，就是模板上可以有多處元素綁定data里的同一個屬性值浊仆，所以dep是依賴于data里面的屬性的客峭。
????而Watcher是每個{{ }}有一個，初次編譯的時候抡柿，會在new的時候自動更新一下模板的數(shù)據(jù)舔琅，等到下次數(shù)據(jù)改變的時候，由dep通知數(shù)據(jù)更新洲劣，直接調(diào)用watcher的update方法备蚓，更新模板的綁定數(shù)據(jù)。
5.new Vue()都干了什么
? ? 上面是正常在構(gòu)建一個vue項目的時候囱稽，實例化一個vue郊尝。
? ? 實例化一個Vue的兩個進程，就是數(shù)據(jù)監(jiān)聽和模板編譯粗悯。observe(data, obj)傳入兩個參數(shù)虚循，一個是數(shù)據(jù)模型data，一個是vue的實例vm样傍。
? ? 而nodeToFragment方法就是識別模板里面的vue指令進行相應(yīng)的處理横缔，處理之后的template插入到掛載目標元素里。
6.Object.defineProperty(obj, key, options)? ??
先講一下這個方法衫哥，為下面的數(shù)據(jù)監(jiān)聽做鋪墊茎刚。
很簡單，該方法接受三個參數(shù)撤逢，全部都是必填的膛锭。參數(shù)：? ? ? ?
?obj：目標對象? ? ? ??
?key：屬性或者方法的名字? ? ? ?
?options：目標屬性所擁有的特性? ?
主要解釋第三個參數(shù)? ? ? ? {? ? ? ? ? ??
????value：屬性的值,? ? ? ? ? ??
????writable：布爾值，規(guī)定屬性是否可重寫,? ? ? ? ??
????configurable：總開關(guān)蚊荣，以第一次設(shè)置為準初狰，一旦是false，則其他屬性不可設(shè)置,? ? ? ? ? ??
????enumerbale：決定屬性是否可枚舉? ? ? ? ? ??
????get:重點互例，后面講,? ? ? ? ? ??
????set:重點奢入，后面講???????
?}? ??
因為如果沒有明確的設(shè)置其他值，默認都是false媳叨。（可以這么理解）腥光。
configurable????只能設(shè)置一次，第二次設(shè)置會報錯糊秆。
writable????在值為true的情況下武福，才能對該值進行重寫修改。
enumerable????定義屬性是否可枚舉? ?痘番，就是能不能被遍歷出來捉片。
訪問器：（set\get）不能和writable/value同時設(shè)置????就是會沖突的意思平痰，set和writable都是設(shè)置屬性值的，所以會沖突????而get和value都是獲取屬性值的界睁，所以也會沖突(可以先這么理解)????
so:一山不容二虎觉增，要么用訪問器，要么用writable和value.
set? ? 是一個函數(shù)翻斟，接收一個新值逾礁，會在值被重寫或修改的時候觸發(fā)這個函數(shù)
get? ? 是一個函數(shù)，返回一個值访惜，會在屬性被調(diào)用的時候觸發(fā)嘹履。
7.數(shù)據(jù)監(jiān)聽
????利用上面的方法，將data里面所有的屬性值遍歷一遍债热，添加上set和get訪問器砾嫉，這樣在設(shè)置data的屬性值的時候，會觸發(fā)set方法窒篱，那么set方法主要有兩個作用焕刮，一是改變data里面的屬性值，二是發(fā)出數(shù)據(jù)變化的通知墙杯。
? ? 上面的方法中配并，為每一個屬性值綁定一個dep對象，初次調(diào)用會有Dep.target高镐，當(dāng)然這是在Watcher里面進行調(diào)用溉旋，暫且不談。屬性的兩個方法嫉髓，一個get和一個set观腊，數(shù)值改變的時候，首先替換掉舊值算行，再進行數(shù)據(jù)變化通知梧油，因為變化通知的是訂閱這個屬性的元素，所以將訂閱這個屬性的管理對象dep傳進去就好了州邢。
? ? 通知函數(shù)調(diào)用了當(dāng)前dep對象的notify函數(shù)儡陨，來通知該dep管理的所有訂閱者。至此實現(xiàn)了data數(shù)據(jù)的監(jiān)聽偷霉。
8.模板編譯
? ? 瀏覽器不認識vue指令，所以要對模板里面的vue指令進行編譯褐筛，那么先要獲取花在目標类少，將里面的所有節(jié)點劫持下來，在新建的文檔碎片(documentflagment)里面進行編譯渔扎，編譯完成自后再插入到掛載目標節(jié)點硫狞。
? ? 如果掛載目標元素有子節(jié)點，那么對第一個子節(jié)點進行編譯（PS：vue規(guī)定template標簽里只能有一個子元素哦，所以頁面的構(gòu)建要由一個標簽包裹起來残吩，在放入template里面）
? ? 模板編譯器函數(shù)會判斷元素節(jié)點是什么類型财忽，表單元素和文本節(jié)點分別處理，因為文本節(jié)點的value會由用戶手動輸入泣侮，所以要給表單元素添加監(jiān)聽器即彪，根據(jù)輸入的value改變data里的屬性值，再更新到視圖上活尊，這是雙向的數(shù)據(jù)流隶校。而文本節(jié)點桥温，只要改變data里面的值蹲堂，節(jié)點隨著改變就行，只是單向的數(shù)據(jù)流佩研。
9.數(shù)據(jù)和節(jié)點綁定
因為dep數(shù)組里存的全是watcher對象铜犬，所以在dep發(fā)布變更通知的時候舞终，會調(diào)用該watcher的update方法，來更新該watcher對應(yīng)的節(jié)點值癣猾。
watcher原型里面的update方法敛劝，會在new Watcher()和dep.notify()的時候調(diào)用。so：數(shù)據(jù)監(jiān)聽和模板編譯就是通過watcher連接起來的煎谍。
????各個函數(shù)的位置需要定位好攘蔽，不然會出現(xiàn)xxx未定義或者xxx不是一個函數(shù)∧耪常可能我還有沒講明白的地方满俗，我雖然明白，但是不知道怎么講了作岖，可以評論問我唆垃。
? ? 最后附上我寫的源碼：https://github.com/qianluoluo/vueOrigin
