初識VUE響應式原理

尚硅谷大數據項目實戰(zhàn)提升大神

download：https://www.51xuebc.com/thread-524-1-1.html

自從Vue發(fā)布以來，就遭到了廣闊開發(fā)人員的喜愛，提到Vue，我們首先想到的就是Vue的響應式系統(tǒng)，那響應式系統(tǒng)到底是怎樣回事呢？接下來我就給大家簡單引見一下Vue中的響應式原理。

vue2的響應式原理

雖然Vue2將于2023年12月31日中止維護，但是我們仍然有很多項目是基于Vue2.X停止開發(fā)的，那么我們先簡單看一看Vue2.X是基于什么完成的吧～

Object.defineProperty

Vue2的響應式原理是基于對象的defineProperty()辦法停止開發(fā)的，那么這個辦法有什么作用呢？MDN是這樣引見的：
**

object.defineProperty()辦法會直接在一個對象上定義一個新屬性，或者修正一個對象的現有屬性，并返回此對象。

也就是說，我們能夠經過對象的這個辦法準確的添加或者修正對象的屬性。每個對象都具有get/set屬性，當訪問get屬性時，會調用getter辦法，當對象的屬性值被修正時，會調用setter辦法，正式基于getter和setter辦法，Vue才能夠應用Object.defineProperty來完成響應式系統(tǒng)。

Object.defineProperty在Vue中的運用

在vue中，當把一個普通的JavaScript對象傳入Vue實例作為data選項，Vue會遍歷此對象的一切屬性，并運用object.defineProperty將這些屬性轉為getter/setter，

getter/setter能夠追蹤依賴，在屬性被訪問的時分通知視圖變卦。

Object.defineProperty(obj, 'targetObj', { get() { // 完成依賴搜集 }, set() { // 發(fā)作變卦，同時通知相關依賴 } })

vue3的響應式原理

vue2.0很好的完成了數據的雙向綁定，但是也遺留了一個很重要的問題：由于Vue會在初始化實例時將property轉化為getter/setter，所以，property必需在data對象上先存在才干讓Vue將其轉換為響應式數據。那么關于新增加的對象、或者某些需求特殊操作的數組想要轉換為響應式數據就需求運用Vue.set等辦法。

Vue3就很好的處理了這個問題。那么，Vue3是如何處理的呢？讓我們就一同看看吧～

Proxy

提到Vue3的數據攔截，我們首先要理解什么是proxy？

Proxy 能夠了解成，在目的對象之前架設一層“攔截”，外界對該對象的訪問，都必需先經過這層攔截，因而提供了一種機制，能夠對外界的訪問停止過濾和改寫。Proxy 這個詞的原意是代理，用在這里表示由它來“代理”某些操作，能夠譯為“代理器”。

原來，Vue3用了Proxy代理替代了Object.defineProperty辦法。同樣的，在proxy中也有get/set辦法，舉個例子～

var obj = new Proxy({}, { get: function (target, name) { return name; }, set: function (target, key, val) { target[key] = val return target; } });

我們經過給每一個目的對象都樹立一個對應的Proxy對象對其代理就能夠補償Object.defineProperty關于新增對象無法監(jiān)聽的缺陷。

簡單設計一個Vue3的響應系統(tǒng)

完成一個簡單的響應系統(tǒng)的思緒：

?讀?。╣et）時，將反作用函數入棧；

?設置（set）時，將反作用函數出棧，執(zhí)行反作用函數。

// 存儲反作用函數的棧 const bucket = new Set() // 存儲被注冊的反作用函數 let activeEffect // 注冊反作用函數 function effect (fn) { // 存儲反作用函數 activeEffect = fn fn() } // 反作用函數fn effect ( () => { document.body.innerText = obj.text } )

執(zhí)行匿名函數fn辦法時，會觸發(fā)響應式數據obj.text的讀取操作，進而觸發(fā)代理對象Proxy的get攔截函數：

const Proxy = new Proxy(data, { get (target, key) { if (activeEffect) { bucket.add(activeEffect) } return target[key] }, set (target, key, newVal) { target[key] = newVal bucket.forEach(fn => fn()) return true } })

到此，我們會發(fā)現，有一個疑問，我們怎樣能保證修正一個屬性之后觸發(fā)的反作用函數是我預期想要觸發(fā)的反作用函數呢？為理解決這個問題，我們還需求樹立反作用函數與目的對象的聯絡：

我們僅需求用WeakMap替代Set數據構造：

const bucket = new WeakMap()

修正Proxy對象：

const Proxy = new Proxy(data, { get (target, key) { if (!activeEffect) return target[key] // 先從棧中取出depsMap，depsMap中保管目的對象和其相關反作用函數的一對多的關系 let depsMap = bucket.get(target) if (!depsMap) { bucket.set(target, (depsMap = new Map()) } // 再依據key從depsMap中獲得deps，deps保管一切與key相關聯的反作用函數 let deps = depsMap.get(key) if (!deps) { depsMap.set(key, (deps = new Set()) } deps.add(activeEffect) return target[key] }, set (target, key, newVal) { target[key] = newVal const depsMap = bucket.get(target) if (!depsMap) return const effects = depsMap.get(key) effects && effects.forEach(fn => fn()) } })

這樣，我們就完成了一個簡易的響應系統(tǒng)。那么為什么要用weakMap而不是運用Map呢？就交給大家一同考慮啦～