本篇文章給大家談?wù)剉ue中實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的原理，以及vue如何實(shí)現(xiàn)響應(yīng)式對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、vue2數(shù)據(jù)響應(yīng)式原理
• 2、vue.js響應(yīng)式原理
• 3、vue響應(yīng)式原理是什么？
• 4、能說說vue的響應(yīng)式原理嗎？
• 5、VUE中數(shù)據(jù)響應(yīng)式原理
• 6、vue數(shù)組響應(yīng)式原理

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

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

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

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

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

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

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

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

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

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

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

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

vue.js響應(yīng)式原理

vue2響應(yīng)式原理主要通過 Object.fefineProperty

當(dāng)把一個(gè)普通的js對(duì)象傳入 Vue 實(shí)例作為 data 選項(xiàng),Vue將遍歷此對(duì)象所有的屬性，并使用 Object.fefineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter 。 Object.defineProperty 是ES5中一個(gè)無(wú)法 shim 的特性，這也是Vue 不支持IE8 以及更低版本瀏覽器的原因。

vue3響應(yīng)式原理主要通過 Proxy 代理對(duì)象

虛擬dom就是用普通的js對(duì)象來(lái)描述 DOM 對(duì)象

真實(shí)dom成員復(fù)雜，虛擬dom可以用簡(jiǎn)潔的方式來(lái)表示實(shí)現(xiàn)真實(shí)dom,創(chuàng)建虛擬dom開銷小。

虛擬dom庫(kù)

使用模塊

Snabbdom 核心

patch 整體過程分析

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

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

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

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

擴(kuò)展資料：

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

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

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

能說說vue的響應(yīng)式原理嗎？

Vue 是一個(gè) MVVM 框架，核心是雙向數(shù)據(jù)綁定，VM（視圖模型）是作為 V（視圖） 和 M（模型）的橋梁。下面是對(duì) Vue 響應(yīng)式（雙向數(shù)據(jù)綁定）的理解，如果錯(cuò)誤盡請(qǐng)指出，一起交流，共同進(jìn)步。

Vue響應(yīng)式原理核心是 數(shù)據(jù)劫持，采用 ES5 的 object.defineproperty 的 getter 和 setter 方法。從一個(gè)例子出發(fā)：

首先，在Vue初始化階段，通過 observer 對(duì) data 中的屬性進(jìn)行遞歸的劫持，包括 name、job_ undergo、a、b等

在 get階段也就是初始化視圖時(shí)，為每一個(gè)劫持的屬性分配一個(gè) 依賴收集器，主要收集當(dāng)前屬性的觀察者對(duì)象，例子中 name 屬性在模板中有兩處被使用，那么 name 屬性的依賴收集器中就存放兩個(gè)觀察者對(duì)象

當(dāng)點(diǎn)擊按鈕時(shí)，將 name 修改為 lisi 時(shí)，會(huì)觸發(fā) observer 的 setter 函數(shù)，將 value 更新為 lisi 最新值，然后通知依賴收集器數(shù)據(jù)發(fā)生了更新。

依賴收集就是發(fā)布訂閱模式，依賴收集器會(huì)通知所有的觀察者對(duì)象，當(dāng)前name 屬性有兩個(gè)觀察者對(duì)象。

觀察者對(duì)象調(diào)用對(duì)應(yīng)的回調(diào)函數(shù)進(jìn)行相關(guān)的處理和DOM更新

以上是純響應(yīng)式原理的分析和總結(jié)，下面配一張流程圖：

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

? ? ? ? ? ? ? ? ? ? ? ? ?凡事可以用點(diǎn)訪問的屬性都是命名屬性

? ? ? ? ? ? ? ? ? ? ? ?直接存儲(chǔ)屬性值的屬性

? ? ? ? ? ? ? ? ? ? ? ?四大特性：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?value? 實(shí)際存儲(chǔ)屬性值

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? writable： true/false? ? 規(guī)定當(dāng)前屬性是否只讀的

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? enumerable：true/false? 控制是否可遍歷

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?configurable： true/false? ? 控制是否可修改或刪除其他特性

? ? ? ? ? ? ? ? ? ? ? ?如何讀?。?/p>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Object.getOwnPrpertyDescriptor(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?obj,"屬性名"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? )

? ? ? ? ? ? ? ? ? ? ? ?如何設(shè)置屬性特性：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Object.defineProperty(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?obj,"屬性"，{特性：值，.........}?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?)

? ? ? ? ? ? ? ? ? 不直接存儲(chǔ)屬性值，僅對(duì)其他屬性提供保護(hù)

? ? ? ? ? ? ? ? ?四大屬性：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? get（）負(fù)責(zé)返回一個(gè)值

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?set（）設(shè)置一個(gè)屬性的值? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? enumerable：? true/false 控制是否可遍歷

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? configurable：? true/false? 控制是否可修改或刪除其他特性

? ? ? ? ? ? ? ? 何時(shí)使用：只需要用自定義屬性的規(guī)則保護(hù)屬性時(shí)?

? ? ? ? ? ? ? ? 如何使用：

? ? ? ? ? ? ? ? ? ? ? ? ? ?1.定義數(shù)據(jù)屬性，實(shí)際存儲(chǔ)屬性值

? ? ? ? ? ? ? ? ? ? ? ? ? ?2.定義訪問器屬性，保護(hù)數(shù)據(jù)屬性? ? 真實(shí)屬性保護(hù)起來(lái)(如圖一)，放一個(gè)傀儡? ? ? 采用閉包匿名函數(shù)自調(diào)（如圖二）? 把受保護(hù)的數(shù)據(jù)隱藏起來(lái)

? ? ? ? ? ? ? ? ? ? ? ? ? Object.defineProperty{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?obj,"屬性"，{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? get:function(){return},

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? set:function(val){xxx=val},

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?enumerable：，

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?configurable：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? 不允許用點(diǎn)直接訪問的屬性

? ? ? ? ? ? ? ? ? ? ? ? 防篡改：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1，防擴(kuò)展? ? 不能放進(jìn)去? 但能取東西

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Object.preventExtensions(obj)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2，密封? ? ?不能放也不能取? 在防擴(kuò)展之上

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Object.seal(obj)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.凍結(jié)? ?禁止修改所有屬性的值

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Object.freeze(obj)? ??

vue數(shù)組響應(yīng)式原理

vue2中Object.defineProperty響應(yīng)式只對(duì)對(duì)象有效，對(duì)數(shù)組無(wú)效，所以對(duì)數(shù)組做額外處理。我們知道，會(huì)改變數(shù)組本身的方法只有7個(gè)：sort, push, pop, slice, splice, shift, unshift,所以可以通過重寫這些方法來(lái)達(dá)到數(shù)組響應(yīng)式

解決方案：

1. 找到數(shù)組原型

2. 覆蓋那些能夠修改數(shù)組的更新方法，讓他們?cè)谛薷臄?shù)組同時(shí)，還可以通知更新

3. 將得到的新的原型設(shè)置到數(shù)組實(shí)例原型上

4. 對(duì)數(shù)組內(nèi)部元素實(shí)現(xiàn)響應(yīng)式

// 實(shí)現(xiàn)數(shù)組響應(yīng)式// 1. 替換數(shù)組原型中7個(gè)方法constoriginalProto=Array.prototype// 克隆體原數(shù)組原型constarrayProto=Object.create(originalProto)// 可修改數(shù)組的7個(gè)方法 , 'sort'constchangeMethods=['push','pop','shift','unshift','slice','splice','sort']//? 2. 在克隆的原型上，覆蓋那些能夠修改數(shù)組的更新方法，讓他們?cè)谛薷臄?shù)組同時(shí)，還可以通知更新changeMethods.forEach(method={arrayProto[method]=function(){// 進(jìn)行原始操作originalProto[method].apply(this,arguments)// 覆蓋操作：增加更新通知console.log(`數(shù)組正在執(zhí)行${method}方法`);}})// 對(duì)象響應(yīng)化functiondefineReactive(obj,key,value){Object.defineProperty(obj,key,{get(){console.log('獲取'+key);returnvalue},set(newVal){if(newVal!==value){// console.log(newVal);// console.log(JSON.stringify(obj[key]));console.log(`正在改變${key}值:從${obj[key]}變?yōu)?{newVal}`)value=newVal}}})}functionobserver(obj){// 不是對(duì)象或者為null，不做響應(yīng)式，結(jié)束if(typeofobj!=='object'||obj===null)return;// 如果是數(shù)組，修改其實(shí)例的原型if(Array.isArray(obj)){// 3. 將得到的新的原型設(shè)置到數(shù)組實(shí)例原型上obj.__proto__=arrayProto// 4. 對(duì)數(shù)組內(nèi)的元素，同樣進(jìn)行響應(yīng)化for(leti=0;iobj.length;i++){// console.log(obj[i]);observer(obj[i])}// 如果是對(duì)象}else{Object.keys(obj).forEach(key={console.log(obj,key,obj[key]);defineReactive(obj,key,obj[key])})}}obj=[{a:1},2,7,5,3]observer(obj)obj.push(4)// 數(shù)組正在執(zhí)行push方法obj.pop()// 數(shù)組正在執(zhí)行pop方法obj[0].a=2// 獲取a? ? // 正在改變a值:從1變?yōu)?obj.sort()// 數(shù)組正在執(zhí)行sort方法console.log(obj);// [ 2, 3, 5, 7, { a: [Getter/Setter] } ]console.log(obj[4].a);// 獲取a? // 2

鏈接：

vue中實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的原理的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于vue如何實(shí)現(xiàn)響應(yīng)式、vue中實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的原理的信息別忘了在本站進(jìn)行查找喔。