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

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

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

?

var obj = {}obj.sex = 'men'Object.defineProperty(obj,'height',{enumerable:true, // 是否可枚舉，默認(rèn)為false// writable:false, // 默認(rèn)為false，不可寫入，即使下面寫入了，遍歷該對象也遍歷不到// value:'jhon', //默認(rèn)值configurable:true, // 是否可刪除，默認(rèn)false。set:function(val){console.log("設(shè)置值",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控制該屬性是否可枚舉，默認(rèn)為false，不可枚舉，通過for in遍歷該對象可以發(fā)現(xiàn)，是不能遍歷出enumerable為false的屬性的，但是仍然可以通過對象點的方式來訪問該屬性。

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

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

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

　　既然談到delete，就小小的普及下關(guān)于他的知識：

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

?

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

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/yzq-fighting/p/7568397.html

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。