在說數據響應式之前，我們要解決一個很重要的問題，那就是Vue到底對data做了什么？先從getter和setter說起，我們用那個他們來對虛擬的屬性進行讀寫。

getter和setter

有如下代碼

let obj0 = { 姓: '高', 名: '圓圓', age: 18};// 需求一，得到姓名let obj1 = { 姓: '高', 名: '圓圓', 姓名() { return this.姓 + this.名; }, age: 18};console.log('需求一：' + obj1.姓名());//高圓圓

此時我們log出來的結果是高圓圓，這個大家都能看懂，但是姓名后面的括號能刪掉嗎？不能，因為它是函數，那么我們怎么去掉括號呢？下面就有我們的需求二

// 需求二，姓名不要括號也能得出值let obj2 = { 姓: '高', 名: '圓圓', get 姓名() { return this.姓 + this.名; }, age: 18};console.log('需求二：' + obj2.姓名);//高圓圓

此時我們使用getter ，不加括號也能得出值。那么我們要怎么改變這個名字呢？

// 需求三：姓名可以被寫let obj3 = { 姓: '高', 名: '圓圓', get 姓名() { return this.姓 + this.名; }, set 姓名(xxx){ this.姓 = xxx[0] this.名 = xxx.slice(1) }, age: 18};obj3.姓名 = ’高媛媛’console.log(`需求三：姓 ${obj3.姓}，名 ${obj3.名}`)//高媛媛

有get就有set,setter就是這樣用的。我們用 屬性值 = xxx 觸發 set 函數，姓名就可以被寫啦。但是我們在需求三中打出 console.log(obj3) 會得到如下圖所示:

如圖為什么會顯示 姓名:(...) 呢？ 這其實是一個get set，瀏覽器在顯示這個姓名的時候就打印出 姓名:(...) ,這說明我們可以在需求三中對姓名進行讀和寫，但是并不存在一個叫做姓名的屬性，而是有get和set來模擬對姓名進行的操作。

Object.defineProperty

在如上例子中，我們在定義對象的時候就直接使用get和set，但是如果對象已經被聲明完了，那我們怎么繼續加上get呢？我們就要用到Object.defineProperty，還是需求三，我們加入如下代碼就可以在定義完之后再加get和set了：

var _xxx = 0Object.defineProperty(obj3,’xxx’,{ get(){ return _xxx }, set(value){ _xxx= value }})

接下來我們就可以解決一開始的問題了：Vue到底對data做了什么？我們舉幾個例子看看：

let data0 = { n: 0}

先聲明一個data0，需求一：用 Object.defineProperty 定義 n：

let data1 = {}Object.defineProperty(data1, ’n’, { value: 0})console.log(`需求一：${data1.n}`)//需求一：0

需求二：n 不能小于 0：

let data2 = {}data2._n = 0 // _n 用來偷偷存儲 n 的值,默認為0Object.defineProperty(data2, ’n’, { get(){ return this._n }, set(value){ if(value < 0) return this._n = value }})console.log(`需求二：${data2.n}`)//0data2.n = -1console.log(`需求二：${data2.n} 設置為 -1 失敗`)//0設置為 -1 失敗data2.n = 1console.log(`需求二：${data2.n} 設置為 1 成功`)//0設置為 1 成功

可是如果對方直接使用data2._n呢？我們能不能做到不在對象上暴露任何能夠被訪問的東西呢？這時候我們就要使用代理：

let data3 = proxy({ data:{n:0} }) // 括號里是匿名對象，無法訪問function proxy({data}){ const obj = {} // 這里的 ’n’ 寫死了，理論上應該遍歷 data 的所有 key，這里做了簡化 // 因為我怕你們看不懂 Object.defineProperty(obj, ’n’, { get(){ return data.n }, set(value){ if(value<0)return data.n = value } }) return obj // obj 就是代理}// data3 就是 objconsole.log(`需求三：${data3.n}`)data3.n = -1console.log(`需求三：${data3.n}，設置為 -1 失敗`)data3.n = 1console.log(`需求三：${data3.n}，設置為 1 成功`)

可是如果不想用代理，要怎么做呢？

let myData = {n:0}let data4 = proxy({ data:myData }) // 括號里是匿名對象，無法訪問// data3 就是 objconsole.log(`杠精：${data4.n}`)//0myData.n = -1console.log(`杠精：${data4.n}，設置為 -1 失敗了嗎！？`)

現在這樣還是能更改myData，所以我們又有一個需求：就算是用戶擅自修改myData，也要攔截：

let myData5 = {n:0}let data5 = proxy2({ data:myData5 }) // 括號里是匿名對象，無法訪問function proxy2({data}){ // 這里的 ’n’ 寫死了，理論上應該遍歷 data 的所有 key，這里做了簡化 let value = data.n//保存開始的n Object.defineProperty(data, ’n’, {//聲明一個新的n get(){ return value }, set(newValue){ if(newValue<0)return value = newValue } })

就加了上面幾句，這幾句話會監聽 data

const obj = {} Object.defineProperty(obj, ’n’, { get(){ return data.n }, set(value){ if(value<0)return//這句話多余了 data.n = value } }) return obj // obj 就是代理}// data3 就是 objconsole.log(`需求五：${data5.n}`)//0myData5.n = -1console.log(`需求五：${data5.n}，設置為 -1 失敗了`)//0myData5.n = 1console.log(`需求五：${data5.n}，設置為 1 成功了`)//1

當我們寫vm = new Vue({data:myData})時，Vue做了兩件事情：

讓vm成為myData的代理(proxy)，可以通過this訪問vm 會對myData所有的屬性進行監控，為了防止myData的屬性變了，vm卻不知道，知道了屬性變化之后就可以調用render(data)，UI就可以自動刷新

那么我們就可以回到標題了，什么是數據響應式呢？如果一個物體能夠對外界的刺激做出反應，那么它就是響應式的。Vue的data是響應式的，const vm = new Vue({data:{n:0}})在這個代碼中如果修改vm.n那么UI中的n就會做出相應的更新，Vue通過Object.defineProperty來實現數據響應式。響應式網頁又是什么呢？即如果改變窗口的大小，網頁內容會做出相應的改變，那么這個網頁就叫響應式網頁。

以上就是Vue 數據響應式相關總結的詳細內容，更多關于Vue 數據響應式的資料請關注好吧啦網其它相關文章！