const obj = {a:{b:1}}
const reactive = (obj)=> new Proxy(obj,{
 get(target,key,receiver){
   /*省略其他邏輯*/
  return Reflect.get(target,key,receiver)
 },
  /*省略其他攔截*/
})
const data = reactive(obj)

問題就出現(xiàn)在Reflect.get(target, key, receiver)這句代碼里，我們現(xiàn)在嘗試一下獲取data.a，應該返回的是{b:1}，不是Proxy,自然不會響應什么。

所以對于這種嵌套對象，我們自然要去遞歸的把對象轉換為響應式對象。

const reactive = (obj)=> new Proxy(obj,{
 get(target,key,receiver){
   /*省略其他邏輯*/
  const res =  Reflect.get(target,key,receiver)
  if(res && typeof res === 'object'){
      return reactive(res)
  }
  return res
 }，
 /*省略其他攔截*/
})

這樣，當內部是嵌套對象的時候，我們遞歸把嵌套對象轉換為響應式對象，這樣再按之前的追蹤依賴，觸發(fā)響應去處理就好了。

當時，深響應和淺響應都是有各自的使用條件的。比如我在完成第一個vue3.2項目有感中寫過，我就比較喜歡用shallowRef，這就是一種淺響應。

好了，話題收回來。我們之前封裝的那個reactive已經(jīng)變成一個深響應了，我們現(xiàn)在就在封裝一層，去區(qū)分淺響應和深響應。我們通過一個新的參數(shù)deepify去判斷淺響應和深響應，然后深響應的時候才去遞歸。

之所以再封裝了一層，是因為我們后續(xù)還要繼續(xù)擴展這個函數(shù)

const createReactive = (obj,deepify = true)=>new Proxy(obj,{
 get(target,key,receiver){
   /*省略其他邏輯*/
  const res =  Reflect.get(target,key,receiver)
  //深響應式遞歸
  if(deepify && res && typeof res === 'object'){
       return reactive(res)
  }
  return res
 }，
 /*省略其他攔截*/
})

這樣子封裝之后，我們就有了2個函數(shù)reactive,shallowReactive

const reactive = (obj)=>createReactive(obj)
const shallowReactive = (obj)=>createReactive(obj,false)

大家使用的時候，其實需要看情況去選擇，淺響應其實有時候比深響應更方便。就比如我之前在那篇文章中舉得例子一樣。

以上就是VueJS設計與實現(xiàn)之淺響應與深響應詳解的詳細內容，更多關于VueJS淺響應深響應的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

VueJS設計與實現(xiàn)之淺響應與深響應詳解

正文

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具