vue核心思想：
- MVVM框架：
dom-viewmodel-model - 組件化
- 數(shù)據(jù)的雙向綁定：
1)常規(guī)思路：
用keyup事件監(jiān)聽，獲取改變的值賦值給另一個對象的text。
2)vue思路：
vue采用數(shù)據(jù)劫持結(jié)合發(fā)布者訂閱者模式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
Object.defineProperty(obj,"username",{
set:function(newVal){
},
get:function(){
}
})
接受三個參數(shù)：
obj:目標(biāo)對象
username：需要定義的屬性或者方法的名字
{}:目標(biāo)屬性所擁有的特性（decriptor）
descriptor：
value：屬性的值
configurable：總開關(guān)，一旦為false，就不能設(shè)置其他的了（value，configurable，enumerable）
enumerable：是否能在for in循環(huán)中遍歷出來火災(zāi)Object.keys中列舉出來。
wriatable可寫
以上三個（除了value）用Object.defineProperty()定義時默認(rèn)為false屬性，若直接在對象上定義屬性，默認(rèn)為true
訪問器屬性：
configurable
enumerable
set和get：set是當(dāng)給屬性username賦值新屬性的時候觸發(fā)，get是獲取username的時候觸發(fā)。
注意：在 descriptor 中不能 同時設(shè)置訪問器 (get 和 set) 和 wriable 或 value，否則會錯，就是說想用(get 和 set)，就不能用（wriable 或 value中的任何一個）
實(shí)現(xiàn)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var obj={};
Object.defineProperty(obj,"userName",{
get:function(){
},
set:function(newVal){
document.getElementById('uName').innerText=newVal;
document.getElementById('username').value=newVal;
}
})
document.getElementById("username").addEventListener("keyup",function(){
obj.userName=event.target.value;
})
}
</script>
</head>
<body>
<input type="text" id="username">
<span id="uName"></span>
</body>
</html>
