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

getter和setter

有如下代碼

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

此時(shí)我們log出來的結(jié)果是高圓圓，這個(gè)大家都能看懂，但是姓名后面的括號(hào)能刪掉嗎？不能，因?yàn)樗呛瘮?shù)，那么我們?cè)趺慈サ衾ㄌ?hào)呢？下面就有我們的需求二

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

此時(shí)我們使用getter ，不加括號(hào)也能得出值。那么我們要怎么改變這個(gè)名字呢？

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

有g(shù)et就有set,setter就是這樣用的。我們用 屬性值 = xxx 觸發(fā) set 函數(shù)，姓名就可以被寫啦。但是我們?cè)谛枨笕写虺?console.log(obj3) 會(huì)得到如下圖所示:

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

Object.defineProperty

在如上例子中，我們?cè)诙x對(duì)象的時(shí)候就直接使用get和set，但是如果對(duì)象已經(jīng)被聲明完了，那我們?cè)趺蠢^續(xù)加上get呢？我們就要用到Object.defineProperty，還是需求三，我們加入如下代碼就可以在定義完之后再加get和set了：

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

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

let data0 = { n: 0}

先聲明一個(gè)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 用來偷偷存儲(chǔ) n 的值,默認(rè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} 設(shè)置為 -1 失敗`)//0設(shè)置為 -1 失敗data2.n = 1console.log(`需求二：${data2.n} 設(shè)置為 1 成功`)//0設(shè)置為 1 成功

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

let data3 = proxy({ data:{n:0} }) // 括號(hào)里是匿名對(duì)象，無法訪問function proxy({data}){ const obj = {} // 這里的 ’n’ 寫死了，理論上應(yīng)該遍歷 data 的所有 key，這里做了簡(jiǎn)化 // 因?yàn)槲遗履銈兛床欢?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}，設(shè)置為 -1 失敗`)data3.n = 1console.log(`需求三：${data3.n}，設(shè)置為 1 成功`)

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

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

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

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

就加了上面幾句，這幾句話會(huì)監(jiān)聽 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}，設(shè)置為 -1 失敗了`)//0myData5.n = 1console.log(`需求五：${data5.n}，設(shè)置為 1 成功了`)//1

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

讓vm成為myData的代理(proxy)，可以通過this訪問vm 會(huì)對(duì)myData所有的屬性進(jìn)行監(jiān)控，為了防止myData的屬性變了，vm卻不知道，知道了屬性變化之后就可以調(diào)用render(data)，UI就可以自動(dòng)刷新

那么我們就可以回到標(biāo)題了，什么是數(shù)據(jù)響應(yīng)式呢？如果一個(gè)物體能夠?qū)ν饨绲拇碳ぷ龀龇磻?yīng)，那么它就是響應(yīng)式的。Vue的data是響應(yīng)式的，const vm = new Vue({data:{n:0}})在這個(gè)代碼中如果修改vm.n那么UI中的n就會(huì)做出相應(yīng)的更新，Vue通過Object.defineProperty來實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式。響應(yīng)式網(wǎng)頁又是什么呢？即如果改變窗口的大小，網(wǎng)頁內(nèi)容會(huì)做出相應(yīng)的改變，那么這個(gè)網(wǎng)頁就叫響應(yīng)式網(wǎng)頁。

以上就是Vue 數(shù)據(jù)響應(yīng)式相關(guān)總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Vue 數(shù)據(jù)響應(yīng)式的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！