最近接觸了vue，在談到vue等等的mvvm框架之前，先了解什么是數據雙向綁定以及如何利用原生JS實現數據雙向綁定
單向數據綁定
指先把模板寫好，然后把模板和數據（數據可能來自后台）整合到一起形成HTML代碼，然后把這段HTML代碼插入到文檔流里
缺點：一旦HTML代碼生成就沒有辦法改變，如果有新數據重新傳入，就必須重新把模板和數據整合到一起插入到文檔流中
數據雙向綁定
數據模型和視圖之間的雙向綁定，用戶在視圖上的修改會自動同步到數據模型中，同樣的，如果數據模型中的值發生變化，也會同步到視圖中去。
優點：無需進行類似單向數據綁定的那些CRUD操作。
最經常應用的場景：表單
缺點：應用場景有限
框架：angular js,Vue js
底層實現大概有兩種：
1.手動綁定，同時使用dirty check去循環監聽。（代表angular js）
2.前端數據劫持，使用define Property,(代表Vue js)
以下是一個簡單的小例子，在input框里輸入什么，后面就會顯示什么
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="aa"/>
<span id="bb">{{hello}}</span>
<script>
var obj = {};
Object.defineProperty(obj,'hello',{
set:function(val){
document.getElementById('bb').innerHTML = val;
document.getElementById('aa').value = val;
}
});
document.getElementById('aa').onkeyup = function(e){
obj.hello = e.target.value;
};
obj.hello = "";
</script>
</body>
</html>
運行效果如下
