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

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

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

?

var obj = {}obj.sex = 'men'Object.defineProperty(obj,'height',{enumerable:true, // 是否可枚舉，默認(rèn)為false// writable:false, // 默認(rèn)為false，不可寫(xiě)入，即使下面寫(xiě)入了，遍歷該對(duì)象也遍歷不到// 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，不可枚舉，通過(guò)for in遍歷該對(duì)象可以發(fā)現(xiàn)，是不能遍歷出enumerable為false的屬性的，但是仍然可以通過(guò)對(duì)象點(diǎn)的方式來(lái)訪問(wèn)該屬性。

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

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

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

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

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

?

細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)，Vue 的data屬性里面的所有屬性都同時(shí)具有set和get方法，而Vue正式通過(guò)這種機(jī)制，檢測(cè)變量的讀取，從而實(shí)現(xiàn)與他綁定的視圖的更新，這種效率毫無(wú)疑問(wèn)比angular是高。 set和get方法在Vue中的第一次應(yīng)用：當(dāng)想定義個(gè)屬性，而這個(gè)屬性又得經(jīng)過(guò)一些轉(zhuǎn)換，才是我們要的值，就可以向下面這樣去定義。調(diào)用的時(shí)候就和其他變量一樣調(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)一步深究了，其實(shí)是我自己還理解的不夠深，想進(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ù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

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