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

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

存在問題演示

最后獲取name值沒有被改變

解決方案

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

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

結果驗證

通用的劫持方案

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

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

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函數(shù)執(zhí)行的時候，都會形成一塊獨立的函數(shù)作用域，傳入的value 因為閉包的關系會常駐內存，這樣一來，每個defineReactive函數(shù)中的value 會作為各自set和get函數(shù)操作的局部變量

總結

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

到此這篇關于Vue深入講解數(shù)據(jù)響應式原理的文章就介紹到這了,更多相關Vue數(shù)據(jù)響應式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: