Vue 數據響應式相關總結

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

這篇文章主要介紹了Vue 數據響應式的相關資料，幫助大家更好的理解和學習vue框架的使用，感興趣的朋友可以了解下

在說數據響應式之前，我們要解決一個很重要的問題，那就是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 觸發(fā) set 函數，姓名就可以被寫啦。但是我們在需求三中打出 console.log(obj3) 會得到如下圖所示:

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

Object.defineProperty

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

var _xxx = 0
Object.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 的值,默認為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} 設置為 -1 失敗`)//0設置為 -1 失敗
data2.n = 1
console.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 就是 obj
console.log(`需求三：${data3.n}`)
data3.n = -1
console.log(`需求三：${data3.n}，設置為 -1 失敗`)
data3.n = 1
console.log(`需求三：${data3.n}，設置為 1 成功`)

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

let myData = {n:0}
let data4 = proxy({ data:myData }) // 括號里是匿名對象，無法訪問

// data3 就是 obj
console.log(`杠精：${data4.n}`)//0
myData.n = -1
console.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
  }
 })

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

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

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

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

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

您可能感興趣的文章: