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

本文目錄一覽：

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

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

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

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

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

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

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

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

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

先來講一下 parsePath ，這個在工具類里，作用是訪問 a.b.c.d 這種鏈式屬性

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

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

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

vue.js響應式原理

vue2響應式原理主要通過 Object.fefineProperty

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

vue3響應式原理主要通過 Proxy 代理對象

虛擬dom就是用普通的js對象來描述 DOM 對象

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

虛擬dom庫

使用模塊

Snabbdom 核心

patch 整體過程分析

vue響應式原理是什么？

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

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

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

擴展資料：

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

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

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

能說說vue的響應式原理嗎？

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

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

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

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

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

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

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

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

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

? ? ? ? ? ? ? ? ? ? ? ? ?凡事可以用點訪問的屬性都是命名屬性

? ? ? ? ? ? ? ? ? ? ? ?直接存儲屬性值的屬性

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?value? 實際存儲屬性值

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

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

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

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

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

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

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

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

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

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

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

? ? ? ? ? ? ? ? ? 不直接存儲屬性值，僅對其他屬性提供保護

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? get（）負責返回一個值

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

? ? ? ? ? ? ? ? ? 不允許用點直接訪問的屬性

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1，防擴展? ? 不能放進去? 但能取東西

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

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

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

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

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

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

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

解決方案：

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

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

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

4. 對數(shù)組內(nèi)部元素實現(xiàn)響應式

// 實現(xiàn)數(shù)組響應式// 1. 替換數(shù)組原型中7個方法constoriginalProto=Array.prototype// 克隆體原數(shù)組原型constarrayProto=Object.create(originalProto)// 可修改數(shù)組的7個方法 , 'sort'constchangeMethods=['push','pop','shift','unshift','slice','splice','sort']//? 2. 在克隆的原型上，覆蓋那些能夠修改數(shù)組的更新方法，讓他們在修改數(shù)組同時，還可以通知更新changeMethods.forEach(method={arrayProto[method]=function(){// 進行原始操作originalProto[method].apply(this,arguments)// 覆蓋操作：增加更新通知console.log(`數(shù)組正在執(zhí)行${method}方法`);}})// 對象響應化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){// 不是對象或者為null，不做響應式，結(jié)束if(typeofobj!=='object'||obj===null)return;// 如果是數(shù)組，修改其實例的原型if(Array.isArray(obj)){// 3. 將得到的新的原型設(shè)置到數(shù)組實例原型上obj.__proto__=arrayProto// 4. 對數(shù)組內(nèi)的元素，同樣進行響應化for(leti=0;iobj.length;i++){// console.log(obj[i]);observer(obj[i])}// 如果是對象}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中實現(xiàn)響應式數(shù)據(jù)的原理的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于vue如何實現(xiàn)響應式、vue中實現(xiàn)響應式數(shù)據(jù)的原理的信息別忘了在本站進行查找喔。