Vue數(shù)據(jù)響應(yīng)式原理是什么

本文小編為大家詳細(xì)介紹“Vue數(shù)據(jù)響應(yīng)式原理是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue數(shù)據(jù)響應(yīng)式原理是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

響應(yīng)式是什么

簡而言之就是數(shù)據(jù)變頁面變

如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式

在Javascript里實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式一般有倆種方案，分別對(duì)應(yīng)著vue2.x 和 vue3.x使用的方式，他們分別是：

對(duì)象屬性攔截 (vue2.x)

Object.defineProperty

對(duì)象整體代理 (vue3.x)

Proxy

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

實(shí)現(xiàn)對(duì)象屬性攔截

字面量對(duì)象定義

let data = {
    name:'小蘭同學(xué)'
}

Object.defineProperty對(duì)象定義

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

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

存在問題演示

最后獲取name值沒有被改變

解決方案

我們可以 通過一個(gè)中間變量 _name 來中轉(zhuǎn)get函數(shù)和set函數(shù)之間的聯(lián)動(dòng)

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

結(jié)果驗(yàn)證

通用的劫持方案

大家想想看，如果現(xiàn)在有一份已經(jīng)聲明好了數(shù)據(jù)的對(duì)象，我們?nèi)绾瓮ㄟ^劫持的方法把每一個(gè)屬性都變成setter和getter的形式

下面是一份已經(jīng)聲明好的數(shù)據(jù)

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

我們想讓里面所有的屬性都變成響應(yīng)式的，并且get和set方法中對(duì)于每個(gè)屬性值的操作是連通的

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

結(jié)構(gòu)說明：這個(gè)地方實(shí)際上使用了閉包的特性，看下圖，在每一次的defineReactive函數(shù)執(zhí)行的時(shí)候，都會(huì)形成一塊獨(dú)立的函數(shù)作用域，傳入的value 因?yàn)殚]包的關(guān)系會(huì)常駐內(nèi)存，這樣一來，每個(gè)defineReactive函數(shù)中的value 會(huì)作為各自set和get函數(shù)操作的局部變量

讀到這里，這篇“Vue數(shù)據(jù)響應(yīng)式原理是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。