嗯，之前在讀js紅寶書的時候，在對象那一章有介紹屬性類型。第一種數據類型指的是數據屬性，第二種是訪問器屬性。在初識vue的時候，其雙向數據綁定也是基於訪問器屬性中的getter和setter函數原理來實現的。本篇文章就着重解析這兩個函數的工作原理。
- 首先，我們先創建一個a對象，並給他定義了一個默認的屬性_b,_b前面的下划線是一種常用的記號，用於表示只能通過對象方法訪問的屬性。
var a={
_b=5;
};
- 接着定義一個屬性為'c'的訪問器屬性，該屬性包含一個get和set函數，get函數用來返回_b的值，set函數用來計算經處理過的_b的值，注意，訪問器屬性不能直接定義，必須使用Object.defineProperty()來定義。
1 Object.defineProperty(a,'c',{ 2 get:function(){ 3 this._b=this._b-1
4 return this._b; 5 }, 6 set:function(newValue){ 7 return this._b=newValue; 8 } 9 })
console.log(a.c) //4
console.log(a.c) //3
a.c=10;
console.log(a._b,a.c);//10 9
當我們第一次讀取a.c的時候，首頁會進入get函數，get函數里面會返回4這個值，當第二次讀取a.c的值，get函數返回3。
接着，設置a.c=10，進set函數設置a._b的值，此時a._b的值為10，然后進入get函數，讀取get函數，a._b的值變成9；
- 利用這個原理，實現一個low版本的雙向數據綁定，代碼如下
1 <body>
2 <input type="text" id="inputs"/>
3 <span id="span"></span>
4 <script type="text/javascript">
5
6 var j={ 7 val:''
8 } 9 Object.defineProperty(j,'value',{ 10 get:function(){ 11 return this.val; 12 }, 13 set:function(newValue){ 14 this.val=newValue; 15 } 16 }) 17 inputs.onkeyup=function(){ 18 j.value=this.value; 19 span.innerHTML=j.val; 20 } 21 </script>
22 </body>
有興趣的同學可以嘗試做一下領悟。附上紅寶書此知識點在P143。