快捷導(dǎo)航

Vue 數(shù)據(jù)響應(yīng)式相關(guān)總結(jié)

更新時(shí)間：2021年01月28日 09:55:21 作者：小孟不做白日夢

這篇文章主要介紹了Vue 數(shù)據(jù)響應(yīng)式的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架的使用，感興趣的朋友可以了解下

在說數(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) 會(huì)得到如下圖所示:

如圖為什么會(huì)顯示 姓名:(...) 呢？這其實(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 用來偷偷存儲(chǔ) 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
  }
 })

就加了上面幾句，這幾句話會(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 就是 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
會(huì)對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)式的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: