vue.js是通過(guò)它實(shí)現(xiàn)雙向綁定的储藐。俗稱(chēng)屬性攔截器或者前端數(shù)據(jù)劫持。
首先看一下官方的定義：
一嘶是、Object.defineProperty()
方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性钙勃，或者修改一個(gè)已經(jīng)存在的屬性， 并返回這個(gè)對(duì)象聂喇。
語(yǔ)法：
Object.defineProperty(obj,prop,descriptor)
參數(shù)：
1.obj：需要定義屬性的對(duì)象辖源。
2.prop：需定義或修改的屬性的名字蔚携。
3.descriptor：將被定義或修改的屬性的描述符。
返回值：
返回傳入函數(shù)的對(duì)象克饶，即第一個(gè)參數(shù)obj酝蜒。
對(duì)象里目前存在的屬性描述符有兩種主要形式：數(shù)據(jù)描述符和存取描述符。數(shù)據(jù)描述符是一個(gè)擁有可寫(xiě)或不可寫(xiě)值的屬性矾湃。存取描述符是由一對(duì) getter-setter 函數(shù)功能來(lái)描述的屬性亡脑。描述符必須是兩種形式之一；不能同時(shí)是兩者邀跃。
數(shù)據(jù)描述符和存取描述符均具有以下可選鍵值：
configurable
當(dāng)且僅當(dāng)該屬性的 configurable 為 true 時(shí)霉咨，該屬性描述符才能夠被改變，也能夠被刪除拍屑。默認(rèn)為 false途戒。
enumerable
當(dāng)且僅當(dāng)該屬性的 enumerable 為 true 時(shí)，該屬性才能夠出現(xiàn)在對(duì)象的枚舉屬性中僵驰。默認(rèn)為 false喷斋。
數(shù)據(jù)描述符同時(shí)具有以下可選鍵值：
value
該屬性對(duì)應(yīng)的值∷廛睿可以是任何有效的 JavaScript 值（數(shù)值星爪，對(duì)象，函數(shù)等）粉私。默認(rèn)為 undefined移必。
writable
當(dāng)且僅當(dāng)該屬性的 writable 為 true 時(shí)，該屬性才能被賦值運(yùn)算符改變毡鉴。默認(rèn)為 false。
存取描述符（第三個(gè)參數(shù)對(duì)象）同時(shí)具有以下可選鍵值：
get
一個(gè)給屬性提供 getter 的方法秒赤，如果沒(méi)有 getter 則為undefined猪瞬。當(dāng)我們讀取某個(gè)屬性的時(shí)候，其實(shí)是在對(duì)象內(nèi)部調(diào)用了該方法入篮，此方法必須要有return語(yǔ)句陈瘦。該方法返回值被用作屬性值。默認(rèn)為 undefined潮售。
set
一個(gè)給屬性提供 setter 的方法痊项，如果沒(méi)有 setter 則為 undefined。該方法將接受唯一參數(shù)酥诽，并將該參數(shù)的新值分配給該屬性鞍泉。默認(rèn)為 undefined。也就是說(shuō)肮帐，當(dāng)我們?cè)O(shè)置某個(gè)屬性的時(shí)候咖驮，實(shí)際上是在對(duì)象的內(nèi)部調(diào)用了該方法边器。
要注意的一點(diǎn)是：在 descriptor 中不能同時(shí)設(shè)置訪問(wèn)器（get 和 set）和 wriable 或 value，否則會(huì)錯(cuò)托修，就是說(shuō)想用 get 和 set忘巧，就不能用 writable 或 value 中的任何一個(gè)。
寫(xiě)個(gè)小例子：
代碼段：
視圖顯示：
1s后的視圖顯示
2s后的視圖顯示
說(shuō)這么多睦刃，也就是我們可以在頁(yè)面監(jiān)聽(tīng)某個(gè)變量砚嘴，當(dāng)變量發(fā)生變化的時(shí)候，我們就更新對(duì)應(yīng)的視圖涩拙。由數(shù)據(jù)來(lái)驅(qū)動(dòng)視圖的更新际长，vue .js的核心思想就是這個(gè)。
二吃环、數(shù)據(jù)雙向綁定：
數(shù)據(jù)模型和視圖之間的雙向綁定也颤，用戶在視圖上的修改會(huì)自動(dòng)同步到數(shù)據(jù)模型中，同樣的郁轻，如果數(shù)據(jù)模型中的值發(fā)生變化翅娶，也會(huì)同步到視圖中去。
優(yōu)點(diǎn)：雙向綁定在一些需要實(shí)時(shí)反應(yīng)用戶輸入的場(chǎng)合會(huì)非常方便（比如多級(jí)聯(lián)動(dòng)菜單）
最經(jīng)常應(yīng)用的場(chǎng)景：表單
代碼示例：
視圖顯示：
注意：
Vue 雖然通過(guò) v-model 支持雙向綁定好唯，但是如果引入了類(lèi)似redux的vuex竭沫，就無(wú)法同時(shí)使用 v-model。
詳情參見(jiàn)：https://github.com/vuejs/vuex/blob/master/docs/zh-cn/forms.md
總結(jié)：
單向綁定跟雙向綁定在功能上基本上是互補(bǔ)的骑篙，所以我們可以在合適的場(chǎng)景下使用合適的手段蜕提。比如在UI控件中(通常是類(lèi)表單操作)，會(huì)使用雙向的方式綁定數(shù)據(jù)靶端；而其他場(chǎng)景則統(tǒng)一采用單向方式構(gòu)建谎势。
