Vue 數(shù)據(jù)響應(yīng)式相關(guān)總結(jié)
在說數(shù)據(jù)響應(yīng)式之前,我們要解決一個(gè)很重要的問題,那就是Vue到底對data做了什么?先從getter和setter說起,我們用那個(gè)他們來對虛擬的屬性進(jìn)行讀寫。
getter和setter
有如下代碼
let obj0 = {
姓: "高",
名: "圓圓",
age: 18
};
// 需求一,得到姓名
let obj1 = {
姓: "高",
名: "圓圓",
姓名() {
return this.姓 + this.名;
},
age: 18
};
console.log("需求一:" + obj1.姓名());//高圓圓
此時(shí)我們log出來的結(jié)果是高圓圓,這個(gè)大家都能看懂,但是姓名后面的括號能刪掉嗎?不能,因?yàn)樗呛瘮?shù),那么我們怎么去掉括號呢?下面就有我們的需求二
// 需求二,姓名不要括號也能得出值
let obj2 = {
姓: "高",
名: "圓圓",
get 姓名() {
return this.姓 + this.名;
},
age: 18
};
console.log("需求二:" + obj2.姓名);//高圓圓
此時(shí)我們使用getter ,不加括號也能得出值。那么我們要怎么改變這個(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ù),姓名就可以被寫啦。但是我們在需求三中打出 console.log(obj3) 會得到如下圖所示:

如圖為什么會顯示 姓名:(...) 呢? 這其實(shí)是一個(gè)get set,瀏覽器在顯示這個(gè)姓名的時(shí)候就打印出 姓名:(...) ,這說明我們可以在需求三中對姓名進(jìn)行讀和寫,但是并不存在一個(gè)叫做姓名的屬性,而是有g(shù)et和set來模擬對姓名進(jìn)行的操作。
Object.defineProperty
在如上例子中,我們在定義對象的時(shí)候就直接使用get和set,但是如果對象已經(jīng)被聲明完了,那我們怎么繼續(xù)加上get呢?我們就要用到Object.defineProperty,還是需求三,我們加入如下代碼就可以在定義完之后再加get和set了:
var _xxx = 0
Object.defineProperty(obj3,'xxx',{
get(){
return _xxx
},
set(value){
_xxx= value
}
})
接下來我們就可以解決一開始的問題了:Vue到底對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 用來偷偷存儲 n 的值,默認(rèn)為0
Object.defineProperty(data2, 'n', {
get(){
return this._n
},
set(value){
if(value < 0) return
this._n = value
}
})
console.log(`需求二:${data2.n}`)//0
data2.n = -1
console.log(`需求二:${data2.n} 設(shè)置為 -1 失敗`)//0設(shè)置為 -1 失敗
data2.n = 1
console.log(`需求二:${data2.n} 設(shè)置為 1 成功`)//0設(shè)置為 1 成功
可是如果對方直接使用data2._n呢?我們能不能做到不在對象上暴露任何能夠被訪問的東西呢?這時(shí)候我們就要使用代理:
let data3 = proxy({ data:{n:0} }) // 括號里是匿名對象,無法訪問
function proxy({data}){
const obj = {}
// 這里的 'n' 寫死了,理論上應(yīng)該遍歷 data 的所有 key,這里做了簡化
// 因?yàn)槲遗履銈兛床欢?
Object.defineProperty(obj, 'n', {
get(){
return data.n
},
set(value){
if(value<0)return
data.n = value
}
})
return obj // obj 就是代理
}
// data3 就是 obj
console.log(`需求三:${data3.n}`)
data3.n = -1
console.log(`需求三:${data3.n},設(shè)置為 -1 失敗`)
data3.n = 1
console.log(`需求三:${data3.n},設(shè)置為 1 成功`)
可是如果不想用代理,要怎么做呢?
let myData = {n:0}
let data4 = proxy({ data:myData }) // 括號里是匿名對象,無法訪問
// data3 就是 obj
console.log(`杠精:${data4.n}`)//0
myData.n = -1
console.log(`杠精:${data4.n},設(shè)置為 -1 失敗了嗎!?`)
現(xiàn)在這樣還是能更改myData,所以我們又有一個(gè)需求:就算是用戶擅自修改myData,也要攔截:
let myData5 = {n:0}
let data5 = proxy2({ data:myData5 }) // 括號里是匿名對象,無法訪問
function proxy2({data}){
// 這里的 'n' 寫死了,理論上應(yīng)該遍歷 data 的所有 key,這里做了簡化
let value = data.n//保存開始的n
Object.defineProperty(data, 'n', {//聲明一個(gè)新的n
get(){
return value
},
set(newValue){
if(newValue<0)return
value = newValue
}
})
就加了上面幾句,這幾句話會監(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 就是 obj
console.log(`需求五:${data5.n}`)//0
myData5.n = -1
console.log(`需求五:${data5.n},設(shè)置為 -1 失敗了`)//0
myData5.n = 1
console.log(`需求五:${data5.n},設(shè)置為 1 成功了`)//1
當(dāng)我們寫vm = new Vue({data:myData})時(shí),Vue做了兩件事情:
- 讓vm成為myData的代理(proxy),可以通過this訪問vm
- 會對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就會做出相應(yīng)的更新,Vue通過Object.defineProperty來實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式。
響應(yīng)式網(wǎng)頁又是什么呢?即如果改變窗口的大小,網(wǎng)頁內(nèi)容會做出相應(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)式的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
前端啟動(dòng)出現(xiàn)報(bào)錯(cuò)提示vue-cli-service?serve的原因及解決辦法
這篇文章主要給大家介紹了關(guān)于前端啟動(dòng)出現(xiàn)報(bào)錯(cuò)提示vue-cli-service?serve的原因及解決辦法,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue element table中自定義一些input的驗(yàn)證操作
vue中使用vue-print.js實(shí)現(xiàn)多頁打印
wepy--用vantUI 實(shí)現(xiàn)上彈列表并選擇相應(yīng)的值操作

