Vue響應式的原理

每次面試逃不過的一道面試題，那是什麼呢？那就是 噔噔噔噔～～～ Vue的響應式，下面我們模擬一下面試的場景，看看大家是否感同身受，哈哈哈哈哈！！！！

 

面試官：看過Vue源碼嗎？

求職者：看過一點。

面試官：那你簡單講一下 Vue 的響應式原理

求職者：那什麼，好的....

面試官：那就開始吧！

求職者：Vue的響應式原理主要經歷了 3 個過程

　　　　1. 響應式處理的核心過程

　　　　2. 收集依賴的過程，

　　　　3. 數據改變時，watcher的執行過程

面試官：額，點點頭，可以具體說一下嘛？比如響應式處理的核心過程是什麼樣的過程？是如何執行的？

求職者：好的，那我從入口開始講一下，先寫一個Vue 的 data 數據

const vm = new Vue({
    el: '#app',
    data: {
      NumberGroup: [1, 2, 3],
      StringName: 'XiaoMing Tongxue',
      userInfo: {
        name: 'DaYa Gao',
        sex: 'Girl'
      }
    }
  })

　　　　1. 首先 通過 _init方法初始化實例成員，其中 initState下的 initData 來初始化Vue的data屬性，同時通過observe將data轉化成響應式數據

　　　　2. observe方法 內 將data屬性下添加 Dep 屬性，並添加__ob__ 屬性, 標識爲 響應式數據

　　　　3. 判斷 data屬性，如果是對象，則調用 walk方法，將data的值進行遍歷，通過 defineReactive 轉化爲響應式數據。

　　　　4. 其中 defineReactive 中分別對 NumberGroup, StringName, userInfo, 添加 Dep 屬性，並對其子屬性也添加 Dep 屬性, 

　　　　5. 添加 Dep 屬性後，通過 Object.definedProperty 的get方法 收集依賴 轉換爲響應式數據

　　　　5.