一，前言

上篇，主要介紹了在 Vue 的數(shù)據(jù)初始化流程中，對象屬性的單層劫持是如何實現(xiàn)的

回顧一下，主要涉及以下幾個核心點：

• data 為函數(shù)和對象的處理，及當 data 為函數(shù)時的 this 指向問題
• Observer 類：對數(shù)據(jù)進行觀測
• walk 方法：遍歷 data 屬性（對象屬性遍歷）
• defineReactive 方法：利用 Object.defineProperty 實現(xiàn)數(shù)據(jù)劫持

本篇，繼續(xù)對 data 數(shù)據(jù)進行初始化操作，對象屬性的深層劫持

二，對象屬性的深層觀測問題

1，拋出問題

當前版本的代碼邏輯：

如果，data 對象中的屬性，還是一個對象（稱為obj）

那么，這個對象（obj）中的屬性是不會被觀測的（目前所說的觀測還僅僅停留在數(shù)據(jù)劫持階段）

就是說，當前僅實現(xiàn)了對 data 對象中屬性的單層劫持，嵌套對象不會被深層劫持

2，測試問題

<script>
  let vm = new Vue({
    el: '#app',
    data() {
      // data函數(shù)返回的對象中，obj屬性為一個對象，它的屬性不會被觀測
      return { message: 'Hello Vue', obj: { key: "val" } }
    }
  });
</script>

3，查看結果

new Vue 時，傳如的 options 選項中的 data 函數(shù)，

data 函數(shù)中，屬性 obj 的值依然是一個對象 { key: “val” }

對象 { key: “val” } 中的 key，此時沒有被添加 get 和 set 方法，說明 key 沒有被劫持

三，對象屬性深層觀測的實現(xiàn)

1，實現(xiàn)思路

TODO：需要先回顧一下，對象屬性單層觀測的流程

有了 data 對象單層觀測的經(jīng)驗，對象屬性 obj 深層劫持就簡單多了

當對象屬性 obj 即將被 Object.defineProperty 劫持時，

再對 obj 對象做一次“對象的單層劫持”

更深層的對象屬性劫持，就是在遞歸執(zhí)行“對象的單層劫持”

即：當屬性為對象類型時（非 null）

繼續(xù)進行 observe 觀測，observe 的遞歸就實現(xiàn)了對象屬性的深層劫持

2，代碼邏輯

function defineReactive(obj, key, value) {
  observe(value);// 遞歸實現(xiàn)深層觀測
  Object.defineProperty(obj, key, {
    get() {
      return value;
    },
    set(newValue) {
      if (newValue === value) return
      value = newValue;
    }
  })
}

TODO：需要突出遞歸的邏輯

四，data 相關優(yōu)化

TODO：結合對象屬性觀測的特點，介紹 data 的相關優(yōu)化

五，結尾

本篇主要實現(xiàn)了 Vue 數(shù)據(jù)初始化流程中，對象屬性的深層劫持，核心思路就是遞歸；

• 通過data = isFunction(data) ? data.call(vm) : data;處理后的data一定是對象類型
• 通過data = observe(data)處理后的 data 就實現(xiàn)了數(shù)據(jù)的響應式（目前只有劫持）
• observe 方法最終返回一個 Observer 類
• Observer類初始化時，通過 walk 遍歷屬性
• 對每一個屬性進行 defineReactive（Object.defineProperty）就實現(xiàn)對象屬性的單層數(shù)據(jù)劫持
• 在 defineReactive 中，如果屬性值為對象類型就繼續(xù)調(diào)用 observe 對當前的對象屬性進行觀測（即遞歸步驟 3~5），這樣就實現(xiàn)了對象屬性的深層數(shù)據(jù)劫持

下一篇，數(shù)組的劫持

到此這篇關于Vue對象的深層劫持詳細講解的文章就介紹到這了,更多相關Vue對象深層劫持內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論