從Object.definedProperty中看雙向數據的綁定
前言
Object.defineProperty是ES5中的方法,vue.js正式利用這種方法實現數據的雙向綁定,以達到響應式的目的。
1、語法
Object.defineProperty(object, propertyname, descriptor) //參數(3個且必須)
2、栗子
var a= {} Object.defineProperty(a,"b",{ value: 123, writable: true, enumerable: true, configurable: true }) console.log(a.b);//123
3、參數詳解
3.1、object:要在其上添加或修改屬性的對象。
3.2、propertyname:一個包含屬性名稱的字符串。就是需要定義的屬性和方法。
3.3、descriptor:可以包含以下屬性,默認情況下, writable, enumerable,configurable值為false
value:屬性的值
writable:如果為false,屬性的值就不能被重寫,只能為只讀了。
enumerable:是否能枚舉,也就是否能在for...in循環中遍歷出來或在Object.keys中列舉出來。
configurable:如果為false,就不能再設置他的(value,writable,configurable)。
還有兩個方法 (雙向數據綁定正是利用了這兩個方法,即訪問器 )
get() 和 set()
4、set和get
set();一旦屬性被重新賦值,此方法被自動調用。
get();一旦屬性被訪問讀取,此方法被自動調用。
不能同時設置訪問器 (get 和 set) 和 wriable 或 value,否則會錯。
var a= {} Object.defineProperty(a,"b",{ set:function(val){ console.log("賦值時候調用我,我的新值是"+ val) }, get:function(){ console.log("取值的時候調用我") return 123 } }) a.b =520 // 賦值時候調用我,我的新值是520 console.log(a.b) // 取值的時候調用我, 返回我設置123,不是開始設置的520
5.5、雙向數據綁定
給對象a定義新的屬性b,並且定義屬性b的get和set方法,當a.b的時候會調用b屬性的get方法,給b屬性賦值的時候,會調用set方法,這就是修改數據的時候,視圖會自動更新的關鍵.(只能兼容IE8以上的瀏覽器,vue也是如此!)。
一個栗子看看vue是如何實現雙向數據綁定的?
<label>輸入:</label><input type="text" id="demo1"><br/> <label>輸出:</label> <input type="textarea" id="demo2"></input> <script> var a={}; var output=[]; Object.defineProperty(a,‘b‘,{ //給a對象添加b屬性 set:function(val){ output[‘b‘]=val; }, get:function(){ return output[‘b‘]; } }) var demo1=document.querySelector(‘#demo1‘); var demo2=document.querySelector(‘#demo2‘); demo1.onkeyup=function(){ a.b=demo1.value;//給a對象添加b屬性時候,觸發了a的set方法,此時#demo1的value值賦值給output[‘b‘]。 demo2.value=output[‘b‘]; } </script>
從Object.definedProperty中看雙向數據的綁定