Vue深入講解數據響應式原理

Posted on by

響應式是什麼

簡而言之就是數據變頁面變

如何實現數據響應式

在Javascript裡實現數據響應式一般有倆種方案，分別對應著vue2.x 和 vue3.x使用的方式，他們分別是：

對象屬性攔截 (vue2.x)

Object.defineProperty

對象整體代理 (vue3.x)

Proxy

其中對象屬性攔截，道理都是相通的

實現對象屬性攔截

字面量對象定義

let data = {
    name:'小蘭同學'
}

Object.defineProperty對象定義

let data = {}
Object.defineProperty(data,'name',{
    // 訪問name屬性就會執行此方法 返回值就是獲取到的值
    get(){
       console.log('name屬性被獲取瞭')
       return '小蘭同學'
    },
    // 設置新值就會執行此方法 newVal就是設置的新值
    set(newVal){
       console.log('name屬性被設置新值瞭')
       console.log(newVal)
    }
})

我們可以通過 data.name 去獲取值，也可以通過 data.name=‘小趙同學’去賦值

存在問題演示

最後獲取name值沒有被改變

解決方案

我們可以 通過一個中間變量 _name 來中轉get函數和set函數之間的聯動

let data = {}
let _name = '小蘭同學'
Object.defineProperty(data,'name',{
    // 訪問name屬性就會執行此方法 返回值就是獲取到的值
    get(){
       console.log('name屬性被獲取瞭')
       return _name
    },
    // 設置新值就會執行此方法 newVal就是設置的新值
    set(newVal){
       console.log('name屬性被設置新值瞭')
       console.log(newVal)
       _name = newVal
    }
})

結果驗證

通用的劫持方案

大傢想想看，如果現在有一份已經聲明好瞭數據的對象，我們如何通過劫持的方法把每一個屬性都變成setter和getter的形式

下面是一份已經聲明好的數據

let data = {
    name: '小蘭同學',
    age: 18,
    height:180
}

我們想讓裡面所有的屬性都變成響應式的，並且get和set方法中對於每個屬性值的操作是連通的

let data = {
    name: '小蘭同學',
    age: 18,
    height:180
}
// 遍歷每一個屬性
Object.keys(data).forEach((key)=>{
    // key 屬性名
    // data[key] 屬性值
    defineReactive(data,key,data[key])
})
// 響應式轉化方法
function defineReactive(data,key,value){
    Object.defineProperty(data,key,{
        get(){
           return value
        },
        set(newVal){
          value = newVal 
        }
    })
}

結構說明：這個地方實際上使用瞭閉包的特性，看下圖，在每一次的defineReactive函數執行的時候，都會形成一塊獨立的函數作用域，傳入的value 因為閉包的關系會常駐內存，這樣一來，每個defineReactive函數中的value 會作為各自set和get函數操作的局部變量

總結

  • 所謂的響應式其實就是攔截對象屬性的訪問和設置，插入一些我們自己想要做的事情
  • 在Javascript中能實現響應式攔截的方法有倆種，Object.defineProperty方法和Proxy對象代理
  • 回歸到vue2.x中的data配置項，隻要放到瞭data裡的數據，不管層級多深不管你最終會不會用到這個數據都會進行遞歸響應式處理，所以要求我們如非必要，盡量不要添加太多的冗餘數據在data中
  • 需要瞭解vue3.x中，解決瞭2中對於數據響應式處理的無端性能消耗，使用的手段是Proxy劫持對象整體 + 惰性處理（用到瞭才進行響應式轉換）

到此這篇關於Vue深入講解數據響應式原理的文章就介紹到這瞭,更多相關Vue數據響應式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：