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

本文目錄一覽：

• 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ù)就是對 Observer 類做多了一層封裝

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

關(guān)鍵在于 defineReactive 方法，這個(gè)方法是對 Object.defineProperty 做了一層封裝，并且對對象的每一層做遞歸調(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，對象要讓 Watcher 類進(jìn)行監(jiān)聽，而 Watcher 有3個(gè)參數(shù)，第一個(gè)是監(jiān)聽的對象，第二個(gè)是監(jiān)聽的屬性，比如 a.b.c.d ，第三個(gè)是屬性改變后觸發(fā)的回調(diào)函數(shù)

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

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

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

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

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

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

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

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

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

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

虛擬dom庫

使用模塊

Snabbdom 核心

patch 整體過程分析

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

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

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

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

擴(kuò)展資料：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

? ? ? ? ? ? ? ? ? ? ? ? ? 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)式只對對象有效，對數(shù)組無效，所以對數(shù)組做額外處理。我們知道，會改變數(shù)組本身的方法只有7個(gè)：sort, push, pop, slice, splice, shift, unshift,所以可以通過重寫這些方法來達(dá)到數(shù)組響應(yīng)式

解決方案：

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

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

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

4. 對數(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ù)組的更新方法，讓他們在修改數(shù)組同時(shí)，還可以通知更新changeMethods.forEach(method={arrayProto[method]=function(){// 進(jìn)行原始操作originalProto[method].apply(this,arguments)// 覆蓋操作：增加更新通知console.log(`數(shù)組正在執(zhí)行${method}方法`);}})// 對象響應(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){// 不是對象或者為null，不做響應(yīng)式，結(jié)束if(typeofobj!=='object'||obj===null)return;// 如果是數(shù)組，修改其實(shí)例的原型if(Array.isArray(obj)){// 3. 將得到的新的原型設(shè)置到數(shù)組實(shí)例原型上obj.__proto__=arrayProto// 4. 對數(shù)組內(nèi)的元素，同樣進(jìn)行響應(yīng)化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中實(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)行查找喔。