歡迎各位小伙伴們！
為大家推薦一款刷題神奇哦 點擊鏈接訪問牛客網
各大互聯網大廠面試真題。從基礎到入階乃至原理刨析類面試題 應有盡有，趕快來裝備自己吧！助你面試穩操勝券，solo全場面試官

響應式是什么

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

如何實現數據響應式

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

1. 對象屬性攔截 (vue2.x)

   Object.defineProperty

2. 對象整體代理 (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函數操作的局部變量

總結

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

面試法寶

很多伙伴找到我詢問面試題，問我針對于前端有沒有比較體系化的面試題總結，今天就給大家推薦這款面試法寶
點擊鏈接直達

https://www.nowcoder.com/link/jihexinliang260

就是我們的牛客網，各大互聯網大廠面試真題。從基礎到入階乃至原理刨析類面試題 應有盡有，趕快來裝備自己吧！助你面試穩操勝券，solo全場面試官

本期推薦

算法是學習人工智能的基石，全書通過116個典型范例+86個AI經典算法+40道經典習題+42道面試真題+42個高手點撥+4套算法職位招聘真題+19個項目，用算法解析人工智能，并以Python為工具進行算法思想和解決方案的有效實踐。

本書以零基礎講解為宗旨，詳細講解了常用的人工智能算法，并與實際應用相結合，內容循序漸進，案例豐富翔實，旨在幫助讀者掌握人工智能的算法基礎。全書分為4篇，共20章。其中第1篇為基礎算法篇，從第1章到第9章，主要講述排序、查找、線性結構、樹、散列、圖、堆棧等基本數據結構算法；第2篇為機器學習算法篇，從第10章到第14章，主要講述分類算法、回歸算法、聚類算法、降維算法和集成學習算法；第3篇為強化學習算法篇，從第15章到第16章，主要講述基于價值的強化學習算法和基于策略的強化學習算法；第4篇為深度學習算法篇，從第17章到第19章，主要講述神經網絡模型算法、循環神經網絡算法和卷積神經網絡算法等內容。本書適合準備從事數據科學與人工智能相關行業的讀者。