vue響應(yīng)式數(shù)據(jù)原理（vuejs響應(yīng)式基本原理）

軟件開放4個月前 (04-15)1048

今天給各位分享vue響應(yīng)式數(shù)據(jù)原理的知識，其中也會對vuejs響應(yīng)式基本原理進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

1、vue2數(shù)據(jù)響應(yīng)式原理
2、vue響應(yīng)式原理是什么？
3、vue響應(yīng)式原理是什么?
4、能說說vue的響應(yīng)式原理嗎？

vue2數(shù)據(jù)響應(yīng)式原理

vue2響應(yīng)式原理由 Observer 類， Dep 類和 Watcher 類互相調(diào)用實(shí)現(xiàn)， Observer 類是把一個普通的object類變成每一層都能相應(yīng)的類， Dep 類的作用是添加，移除，通知和收集訂閱者， Watcher 類是訂閱者，主要功能是把當(dāng)數(shù)據(jù)改變的時候，去調(diào)用回調(diào)函數(shù)，修改dom節(jié)點(diǎn)

那么是怎么實(shí)現(xiàn)響應(yīng)式的呢，首先是一個函返源數(shù)，要先轉(zhuǎn)換為可響應(yīng)的，那就需要用到 Observer 類

這個 observe 函數(shù)就是對 Observer 類做多了一層封裝

而 Observer 類是通過 Object.defineProperty 來監(jiān)控數(shù)據(jù)的獲取和改變的

關(guān)鍵在于 defineReactive 方法，這個方法是對 Object.defineProperty 做了一層封裝，并且對對象的每一層做遞歸調(diào)用，實(shí)現(xiàn)了每一層都有響應(yīng)監(jiān)控

但是漏褲態(tài)是怎么知道現(xiàn)在要保存哪一個 Watcher 實(shí)例到訂閱者數(shù)組里面的呢？其實(shí)就是用了這個 Dep.target ， Dep.target 相當(dāng)于 window.target ，全局只有一個，全局也能訪問

首先得先講一講 Watcher 類，我們先回到上面的index.js，對象要讓 Watcher 類進(jìn)行監(jiān)聽，而 Watcher 有3個參數(shù)，第一個是監(jiān)聽的對象，第二個是監(jiān)聽的屬性，比如 a.b.c.d ，第三個是屬性改變后觸發(fā)的回調(diào)函數(shù)

先來講一下 parsePath ，這個在工具類里純悔，作用是訪問 a.b.c.d 這種鏈?zhǔn)綄傩?/p>

首先是觸發(fā)了 Watcher 的 get() 方法，把當(dāng)前實(shí)例保存在了 Dep.target 里面

然后在調(diào)用 parsePath 獲取屬性值的過程中，會挨個訪問響應(yīng)對象的屬性，就會觸發(fā)相應(yīng)的 getter ，我們回到 defineReactive.js ，可以發(fā)現(xiàn)這時候相應(yīng)屬性的 getter 就會把 Dep.target 也就是相應(yīng)的 Watcher 的實(shí)例保存在了 Dep 類的訂閱者數(shù)組里面

最后，在改變屬性的時候，相應(yīng)屬性的 setter 就會通知之前已經(jīng)保存的訂閱者數(shù)組，遍歷觸發(fā)回調(diào)

vue響應(yīng)式原理是什么？

當(dāng)一個vue實(shí)例加載時，會進(jìn)行初始化，將他的配置項options和mixins的內(nèi)容合并，以options為主，而在初始化data時，會對data對象進(jìn)行數(shù)據(jù)劫持，并做代理，通過Object。

definproperty劫持?jǐn)?shù)據(jù)后vue會查找當(dāng)前屬性有無依賴項既被watch，或者依賴當(dāng)前屬性的值，如果有，就會注冊依賴既deps，而注冊deps時會在wather內(nèi)添加新的更新目標(biāo)。

當(dāng)數(shù)據(jù)發(fā)生變更時，會觸發(fā)deps的更新方法，調(diào)用所有的watcher，watcher又會觸發(fā)對應(yīng)deps的更新，直到所有依賴項更新完畢。

擴(kuò)展資料：

Vue 是一個 MVVM框架，核心是雙向數(shù)據(jù)綁定，VM（視圖模型）是作為V（視圖）和M（模型）的橋梁。對Vue響應(yīng)式（雙向數(shù)據(jù)綁定）的理解，如果錯誤盡請指出，一起交流，共同進(jìn)步。Vue響應(yīng)式原理核心是數(shù)據(jù)劫持，采用春核空 ES5 的 object.defineproperty 的 getter 和 setter 方法。

Vue.js 最顯著的一個功能是響應(yīng)系統(tǒng) —— 模型只是普通對象，修改它則更新視圖。這讓狀態(tài)管理非常簡單且直觀，不過理解它的原理也很重要，可以避免一些常見問題。下面我們開始深扒瞎挖 Vue.js 響應(yīng)系統(tǒng)的底層細(xì)節(jié)。

參考資料來氏橡源：百度百科-Vue·js前端開發(fā)技術(shù)

vue響應(yīng)式原理是什么?

vue響應(yīng)式基本原理是基于Object.defineProperty(obj，prop，descriptor)，descriptor里面可以定義get和set方法，可以在獲取屬性值事觸發(fā)get方法（可以收集依賴），設(shè)置屬性值時觸發(fā)set方法（更新依賴）。Vue最獨(dú)特的特性之一，是其非侵轎搏入性的響應(yīng)式系統(tǒng)。數(shù)據(jù)模型僅僅是普通的JavaScript對象。而當(dāng)你修改它們時，視圖會進(jìn)行更新。

vue響應(yīng)激鉛式系統(tǒng)

vue作為一個前端框架，近兩年非常的火，雖然它的社區(qū)不像react那樣繁榮，但它配套的東西都有固定的團(tuán)隊維護(hù)，用起來更方便。它是MVVM模型的框架（不熟悉框架模型的同學(xué)可以看看阮一峰大神的博客，或者點(diǎn)這里），實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，與其他框架相比vue非常的輕量級，另一個重要的特點(diǎn)就是它的閉鉛祥響應(yīng)式系統(tǒng)。