很早之前就想開一系列有關vue的博客，奈何太忙了，哈哈（愛信不信）。。。剛剛收到消息vue2.5發布了,哎!還是應該加快一下步伐,要不就與社會脫節了。這次采用小步慢跑的形式一點一點總結vue，第一篇先說一些理論知識吧，總要有個印象，后面隨之學習的深入，慢慢就會領悟。
1、首先，vue是什么?
我們看官網上的介紹:vue.js 是一套構建用戶界面的漸進式js框架。那么什么叫漸進式框架呢？所謂漸進式就是一步一步的用嘛，比如你只想在頁面上渲染一些簡單數據，那你只用它的核心代碼就好。如果你想更進一步用到組件，那你需要用vue的組件系統。如果項目更大,那你需要用到路由啊,構建工具等等。項目需要哪塊就用哪塊，這樣自底向上增量開發的設計，加上與單文件組件和 Vue 生態系統支持的庫結合，使得Vue 也完全勝任復雜的單頁應用程序，而且上手也很容易了。
2、vue的兩個核心點
介紹核心點之前我們先寫個小例子吧。
頁面中引入vuejs ,可以去官網上下載開發版本,也可以采用CDN方式直接引入 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vuejs</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ content }}
</div>
<script>
let data = {
content:"Hello World!"
}
var vm = new Vue({
el:"#app",
data:data
});
</script>
</body>
</html>
最好,還是手動敲一遍吧，你就會知道你會犯多少低級錯誤。在瀏覽器中查看實例，打開控制台，輸入vm.content = "Hi, vue!",回車頁面立馬輸出變為HI,vue! 這說明數據改變,頁面也自動改變。那就引出了Vue的第一個核心點——響應式的數據綁定。是不是很AngularJS很像?他兩的實現原理不同:
臟值檢查（angular.js）
思路：angular.js 是通過臟值檢測的方式比對數據是否有變更，來決定是否更新視圖，最簡單的方式就是通過 setInterval() 定時輪詢檢測數據變動，angular只有在指定的事件觸發時進入臟值檢測，大致如下：
- DOM事件，譬如用戶輸入文本，點擊按鈕等。( ng-click )
- XHR響應事件 ( $http )
- 瀏覽器Location變更事件 ( $location )
- Timer事件( $timeout , $interval )
- 執行 $digest() 或 $apply()
數據劫持（Vue.js）
思路： vue.js 則是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
具體怎么使用Object.defineProperty()實現響應式數據綁定,可以看這里: http://www.jb51.net/article/106484.htm
第二個核心點——組合的視圖組件
vue寫頁面時，我們可以頭部一個組件，側邊一個組件，中間內容區域另外一個組件。vue將我們的頁面映射為組件樹。這樣做組件可重用，好處很多。
3、虛擬DOM
首先我們定義的模板（無論是html模板,字符串模板還是render函數定義的模板），編譯調用內部的渲染函數(createElement)形成圖二的數據結構，經過render生成虛擬DOM樹，這個虛擬的DOM樹存在內存中,經過內部的編譯器最后形成真實的DOM。
那么虛擬DOM有什么好處呢？我們知道運行js很快,但是大量操作DOM就會很慢,我們在更新一個元素的值后,經常要刷新整個DOM,這樣造成了資源的浪費。有了虛擬DOM，當某個DOM節點的屬性值發生變化后，只更新這一小塊的節點，這樣大大提高了性能。虛擬DOM這塊，還有好多算法，有機會再開博客總結，自己可以先研究一下。
4、MVVM模式
M 代表數據模型，V 視圖，VM視圖模型。我們從model層拿到數據以后，通過vm層到view視圖層進行渲染，vm層幫我們幫數據進行綁定，它就是m層和v層之前的橋梁，把他兩聯系起來。具體到項目中，我們可以看剛才的實例：
