Vue數據響應式原理是什么

本文小編為大家詳細介紹“Vue數據響應式原理是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue數據響應式原理是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

響應式是什么

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

如何實現數據響應式

在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函數操作的局部變量

讀到這里，這篇“Vue數據響應式原理是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。