Vue是前端三大框架之一，也被很多人指責抄襲，說他的兩個核心功能，一個數據雙向綁定，一個組件化分別抄襲angular的數據雙向綁定和react的組件化思想，咱們今天就不談這種大是大非，當然我也沒到達那個能力。就來簡單的說說這個數據雙向綁定。

　　Vue的數據雙向綁定和angular的數據綁定的原理完全不一樣，Angular是用的數據臟檢測，當Model發(fā)生變化，會檢測所有視圖是否綁定了相關數據，再更改視圖，其本質就是循環(huán)遍歷，發(fā)現與更改數據相關的視圖，然后將其更新，性能上有點差。而Vue使用的發(fā)布訂閱模式，是點對點的綁定數據，其本質就是我們今天要談論的這個方法：Object.defineProperty()

　　我們先來看看他的用法：通過這個方法為對象設置的屬性可以控制他的很多行為，如：

?

var obj = {}obj.sex = 'men'Object.defineProperty(obj,'height',{enumerable:true, // 是否可枚舉，默認為false// writable:false, // 默認為false，不可寫入，即使下面寫入了，遍歷該對象也遍歷不到// value:'jhon', //默認值configurable:true, // 是否可刪除，默認false。set:function(val){console.log("設置值",val)_height = val},get:function(){console.log("獲取值")return _height}})obj.height = 100console.log(obj)console.log(1,obj.height);console.log(2,obj._height)delete obj._height;console.log(obj)for (var k in obj){console.log(k)console.log(obj[k]);}

?

enumerable控制該屬性是否可枚舉，默認為false，不可枚舉，通過for in遍歷該對象可以發(fā)現，是不能遍歷出enumerable為false的屬性的，但是仍然可以通過對象點的方式來訪問該屬性。

writable控制屬性是否可以被賦值，默認為false。盡管通過對象點的方式賦值，也是遍歷不出來的。

value設置該變量的默認值，注意，盡管writable為false的時刻，該值也是生效的，因為這個屬性只是控制他是否可以被賦值，并不能阻止他有默認值。

configurable控制該變量是否可刪除，默認為false，我們可以通過delete關鍵字來測試下，發(fā)現盡管使用delete刪除了該變量，for in 還是可以遍歷出來，說明是不能刪除的，當其值為true則可以。

　　既然談到delete，就小小的普及下關于他的知識：

1. delete關鍵字可以用來刪除沒有使用var聲明的變量 2. delete關鍵字還可以用來刪除對象的屬性 3. delete關鍵字擁有返回值，表示刪除是否成功,但是不可靠！（即對于一些不可以刪除的屬性，他刪除后沒有達到效果，但結果依然為true） set和get方法：這兩個方法會在改變量設置值和獲取值時自動調用，但是這兩個方法不能和writable以及value一起使用，否則會報錯。當這兩個方法只設置一個時，就是對應著只讀或只寫屬性。 set方法里面設置一個變量接收將要設置的值時，可以用其他的名字，如：_height，也可以和該變量同名，如height，但是不管怎么，這個變量都不屬于該對象，在外面通過對象點的方式是訪問不到的，而只能訪問到調用Object.defineProperty()方法設置的那個變量，即他的第二個參數。并且在打印該對象的時候，你會發(fā)現height屬性后面有個（。。。），并沒有直接顯示該屬性，以后碰到這樣的，就說明他是設置了set或get方法，如下圖

?

細心的同學會發(fā)現，Vue 的data屬性里面的所有屬性都同時具有set和get方法，而Vue正式通過這種機制，檢測變量的讀取，從而實現與他綁定的視圖的更新，這種效率毫無疑問比angular是高。 set和get方法在Vue中的第一次應用：當想定義個屬性，而這個屬性又得經過一些轉換，才是我們要的值，就可以向下面這樣去定義。調用的時候就和其他變量一樣調用即可，如：this.end_date get end_date () {if (this.local_time.length) {return toEST(this.local_time[1])} else {return ''}}

?

這里關于數據雙向綁定的原理就不做進一步深究了，其實是我自己還理解的不夠深，想進一步了解的同學，可以參考這篇文章。http://www.cnblogs.com/kidney/p/6052935.html?utm_source=gold_browser_extension

轉載于:https://www.cnblogs.com/yzq-fighting/p/7568397.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue的数据双向绑定和Object.defineProperty()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。