一、dom局部刷新流程
- 請求後臺數據（一般用Ajax）。
- 將數據加載到template模板。
- 將模板渲染輸出的html結果放到需要刷新的dom節點中。
上面第2步中提到的模板渲染框架有很多，例如
underscore.js庫等，但是核心流程都是獲取後端的數據，按照一定的規則加載到寫好的模板中，輸出成在瀏覽器中顯示的HTML的過程。
二、Vue實現局部刷新
- 請求後臺數據。
- 無需進行模板渲染，只需要修改dom節點對應的Vue實例中的數據，dom節點中的數據會自動變化。
這是因爲vue的一個mvvm框架：
數據雙向綁定，當數據發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，數據也會跟着同步變化。
三、分別用傳統方式和Vue實現一個例子
頁面上只有一個div和一個button，點擊按鈕，去後臺請求數據並替換div中的數據。
3.1 傳統方式
- html頁面代碼如下：
<body>
<div id="show"></div>
<button id="changeBtn">替換user</button>
</body>
- js代碼如下：
<script>
//當前用戶Id
var currentId = 1;
//點擊按鈕
$("#changeBtn").click(function () {
currentId == 1?currentId=2:currentId=1
changeUser(currentId)
});
//替換user的方法
function changeUser(id){
$.ajax({
url : '/get',
data : {id:id},
method : 'post',
success : function (user) {
$("#show").html(user.name);//局部刷新
console.log(user);
}
});
}
</script>
結果如下：點擊“替換user”，div的內容會被替換。
這個例子中，ajax請求成功後，利用
$("#show").html(user.name);修改div的內容（由於內容簡單，沒有用模板渲染，複雜的數據結構一般都會用模板渲染來構造html代碼，然後在刷新dom）。
3.2 Vue方式
- html代碼：
<body>
<div id="show">{{userName}}</div>
<button id="changeBtn" v-on:click="changeU">替換user</button>
</body>
js代碼：
<script>
//展示user的Vue組件
var divVm = new Vue({
el:'#show',
data: {
userName : '暫無'
}
});
//按鈕組件
var btnVm = new Vue({
el:'#changeBtn',
data: {
currentId : -1
},
methods :{
changeU : function () {
this.currentId == 1?this.currentId=2:this.currentId=1;
changeUser(this.currentId);
}
}
});
//替換user的方法
function changeUser(id){
$.ajax({
url : '/get',
data : {id:id},
method : 'post',
success : function (user) {
divVm.userName = user.name;
console.log(user);
}
});
}
</script>
上面例子中，ajax請求數據成功以，沒有任何操作dom的代碼，只是修改了divVm實例的數據
divVm.userName = user.name;div的內容自動就變了。下面說一下divVm和btnVm，他們兩個都是Vue實例。divVm封裝了dom節點中的div、以及div涉及到的數據；btnVm封裝了dom節點中button、以及button要用到的數據和點擊事件。vue會自動監聽vue實例中的數據變化，如果發現vue實例中的數據變化了，將自動更新vue實例中對應的dom節點內容。vue的每一個實例的數據，只能通過實例本身來修改，vue實例中的方法只能通過vue實例本身來調用。這樣的好處是進行了很好的隔離，節點之間互相不干涉。
上面例子中vue將下面的內容都封裝成了一個vue實例：
- dom節點。
- dom節點需要的數據。
- 操作dom節點可能用到的方法。
這部分這只是本例子體現出來的，vue還有很多其他強大的特性可以實現更復雜的業務邏輯，例如vue的生命週期函數（鉤子函數）等。
看到一篇講雙向數據綁定的文章，寫的非常好。