一，前言

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

回顧一下，主要涉及以下幾個(gè)核心點(diǎn)：

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

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

二，對(duì)象屬性的深層觀測(cè)問(wèn)題

1，拋出問(wèn)題

當(dāng)前版本的代碼邏輯：

如果，data 對(duì)象中的屬性，還是一個(gè)對(duì)象（稱為obj）

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

就是說(shuō)，當(dāng)前僅實(shí)現(xiàn)了對(duì) data 對(duì)象中屬性的單層劫持，嵌套對(duì)象不會(huì)被深層劫持

2，測(cè)試問(wèn)題

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

3，查看結(jié)果

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

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

對(duì)象 { key: “val” } 中的 key，此時(shí)沒(méi)有被添加 get 和 set 方法，說(shuō)明 key 沒(méi)有被劫持

三，對(duì)象屬性深層觀測(cè)的實(shí)現(xiàn)

1，實(shí)現(xiàn)思路

TODO：需要先回顧一下，對(duì)象屬性單層觀測(cè)的流程

有了 data 對(duì)象單層觀測(cè)的經(jīng)驗(yàn)，對(duì)象屬性 obj 深層劫持就簡(jiǎn)單多了

當(dāng)對(duì)象屬性 obj 即將被 Object.defineProperty 劫持時(shí)，

再對(duì) obj 對(duì)象做一次“對(duì)象的單層劫持”

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

即：當(dāng)屬性為對(duì)象類(lèi)型時(shí)（非 null）

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

2，代碼邏輯

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

TODO：需要突出遞歸的邏輯

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

TODO：結(jié)合對(duì)象屬性觀測(cè)的特點(diǎn)，介紹 data 的相關(guān)優(yōu)化

五，結(jié)尾

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

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

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

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

最新評(píng)論