最近想了解一下Vue是怎么實現數據雙向綁定的,了解到是基于Object.definProperty,在此記錄一下。
Object.defineProperty 顧名思義,就是給對象定義一個屬性,總共有這么幾種:
- value 屬性的值
- writable 是否可改寫,如果為false,就為只讀,不能重新賦值,和const差不多
- enumerable 能否枚舉,如果設置為false則不能在for……in中出現
- configurable ’配置‘,顧名思義,一旦為false,就不能再設置他的(value,writable,configurable)
-
不能同時設置訪問器 (get 和 set) 和 wriable 或 value,否則會錯,就是說(get 和 set)和(wriable 或 value中的任何一個)只能取其一
- get 讀取時調用這個方法
- set 賦值時調用這個方法
?隨便寫點東西
<script>var c = {year:2017};Object.defineProperty(c,'a',{
// 注意這里不能直接不能對a直接賦值,否則會無限回調set:function(val){console.log(`I set the value ${val}`);},get:function(){return this}})</script>
?分別賦值和取值:
?
set的時候正確的調用了方法,但是取值的時候如果寫return this.a
就會報錯,棧溢出。看上面的圖我們就明白了,a的值指向自身,如果直接打印就會無限回調,雖然我們不能取到a,但我們能通過a取到其他屬性
修改get:
set:function(val){this.year = val
},
get:function(e){return this.year
}