VUE相關(guān)知識(shí)點(diǎn)
vue是一個(gè)用于構(gòu)建用戶界面的框架粱栖，采用MVVM模式（model-view-viewmodel），model即為對(duì)應(yīng)的數(shù)據(jù)，view是html掺炭，viewmodel則是vue實(shí)例對(duì)應(yīng)代碼見下面的代碼片段秒梳。
<!DOCTYPE html>
<html>
<head>
<title>聲明式渲染</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
//View
<div id="app">
{{message}}
</div>
<script>
//Model
var exampleData = {
message: 'Hello Vue!'
}
//ViewModel
var app = new Vue({
el: '#app',
data: exampleData
})
</script>
</body>
</html>
vue是以數(shù)據(jù)為驅(qū)動(dòng)的法绵，將DOM與數(shù)據(jù)進(jìn)行綁定，兩者將保持同步酪碘。
vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定使用 v-model="xxx_feild" 朋譬，原理是使用data bindings 和dom listeners是實(shí)現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵，dom listeners監(jiān)聽dom的變化兴垦，一旦變化徙赢，則對(duì)應(yīng)的數(shù)據(jù)也改變；data bindings則是監(jiān)聽數(shù)據(jù)的變化探越，一旦變化狡赐，則對(duì)應(yīng)的dom也發(fā)生改變。
vue的特點(diǎn)：
- 頁(yè)面結(jié)構(gòu)清晰簡(jiǎn)潔 html模板+數(shù)據(jù)+vue實(shí)例+樣式
- 組件化：可維護(hù)性钦幔、可復(fù)用性+解耦
- 數(shù)據(jù)驅(qū)動(dòng) 減少dom操作（使用fragment文檔片段）枕屉，提升性能
- 輕量級(jí)
- 文檔齊全 上手簡(jiǎn)單
總結(jié)：
vue使用mvvm框架，以數(shù)據(jù)為驅(qū)動(dòng)鲤氢，實(shí)現(xiàn)了雙向數(shù)據(jù)綁定搀擂。主要的有點(diǎn)就是：輕量級(jí)、文檔簡(jiǎn)單易上手 vue全家桶卷玉、容易向后兼容 改版比較容易 減少dom操作 組件化 更方便維護(hù) 哨颂。
實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理是：利用object.defineProperty(obj, key, options {enumable configurable get set}), 改寫對(duì)象數(shù)據(jù)的set get方法，改變數(shù)據(jù)改取的默認(rèn)行為相种。
a）dom元素值得改變 反映到 數(shù)據(jù)上 監(jiān)聽dom元素的onchange 等事件 獲取到最新的值 進(jìn)行set威恼；
b）數(shù)據(jù)的改變反映到元素上 監(jiān)聽數(shù)據(jù)的set方法 在set方法中檢測(cè)到newval oldval的不同 進(jìn)行dom的更新等；
new VUE({el：'#id'蚂子，data: {}});
在VUE的構(gòu)造函數(shù)里沃测，進(jìn)行數(shù)據(jù)的監(jiān)控注冊(cè)observe，即利用Object.defineProperty進(jìn)行數(shù)據(jù)的監(jiān)控食茎，檢測(cè)到數(shù)據(jù)變化的時(shí)候蒂破，即 進(jìn)行相應(yīng)的view更新；同時(shí)對(duì)入口元素進(jìn)行解析别渔，利用documentFragment進(jìn)行各種指令附迷、元素類型的判斷惧互，同時(shí)進(jìn)行相關(guān)事件的綁定，如onchange喇伯、keyup的時(shí)候喊儡， 進(jìn)行數(shù)據(jù)的更新 ，與數(shù)據(jù)進(jìn)行綁定稻据，解析完成 在插入到dom文檔中艾猜，減少dom操作；
其中涉及到更新的模式：觀察者捻悯、訂閱者模式匆赃，一處改變，多處響應(yīng)更新今缚。
參考：
【這篇寫的很好】
https://www.cnblogs.com/libin-1/p/6893712.html
http://www.92to.com/bangong/2016/12-14/14476078.html
