本篇文章給大家談?wù)刅ue的響應(yīng)式原理，以及vue響應(yīng)式原理簡書對應(yīng)的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、vue2響應(yīng)式原理總結(jié)
• 2、Vue3.0 響應(yīng)式原理
• 3、能說說vue的響應(yīng)式原理嗎？
• 4、vue數(shù)組響應(yīng)式原理
• 5、vue2數(shù)據(jù)響應(yīng)式原理

vue2響應(yīng)式原理總結(jié)

vue組件實例化時，會對data屬性深度遍歷（遇到數(shù)組或者對象）為每一個屬性添加數(shù)據(jù)劫持。數(shù)據(jù)劫持就是使用Object.defineProperty（de fai in pro pu tei）方法添加get/set方法。

在這個過程中會實例化一個Dep類。

1.在get攔截器里觸發(fā)dep實例的depend方法,進行依賴收集，實質(zhì)是在dep的實例屬性sub數(shù)組中添加依賴這個屬性的watcher實例。

2.在set攔截器里觸發(fā)dep實例的notify方法，對收集到的所有依賴派發(fā)更新，（watcher的update方法）

vue組件實例化時會實例化一個渲染watcher,渲染watcher實例化過程會做兩件事情。

1.創(chuàng)建vnode,在這個過程中，訪問了data屬性，觸發(fā)了get方法，完成了依賴收集。

2.觸發(fā)了子組件的實例化，子組件實例化又會重復(fù)上述數(shù)據(jù)劫持的過程。

這個過程就是對組件樹的深度遍歷。

結(jié)合組件生命周期來看整個過程，父組件會先觸發(fā)created鉤子，子組件后觸發(fā)created鉤子。而子組件mouted鉤子會先執(zhí)行，父組件的mouted鉤子后執(zhí)行。

分步驟記憶

1、實現(xiàn)頁面不刷新的原理

2、頁面視圖刷新的原理

實現(xiàn)頁面不刷新

1.hash

2.history

3.abstract：支持所有 JavaScript 運行環(huán)境，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的 API，路由會自動強制進入這個模式。

1.hash(哈希模式)，#符號后邊是瀏覽器行為，在改變的時候不對頁面進行刷新（重新請求URL）（監(jiān)聽hashChange事件）

2.history模式，H5新增了pushState，replaceState連個新API,可以修改歷史記錄卻不會使瀏覽器刷新頁面。

視圖更新原理

其原理就是vue的響應(yīng)式更新dom的原理，m = v

m是數(shù)據(jù)，也就是在vue-router install時在根組件（root vue component）添加了_route屬性，在匹配到對應(yīng)路由后更新了_route屬性值，繼而觸發(fā)了該屬性值的渲染watcher,在繼而觸發(fā)dom更新。

兩種模式的不同

1.部署時，history模式需要服務(wù)端處理所有可能的路徑（例如配置nginx的配置文件），防止出現(xiàn)404。哈希模式則不需要。

2.URL表示不同。

v-model指令就是 v-bind:value 和 @input 的語法糖。

它即可以支持原生表單元素，也可以支持自定義組件

在自定義組件中其實際是這樣的：

它的實現(xiàn)通過自定義render函數(shù), 緩存了 vnode

Vue 在更新 DOM 時是異步執(zhí)行的，只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。

如果同一個 watcher 被多次觸發(fā)，只會被推入到隊列中一次。在緩沖時會去除重復(fù)數(shù)據(jù)避免不必要的計算和 DOM 操作。

$nextTick(cb) 目的是在DOM 更新完成后傳入的回調(diào)函數(shù)再被調(diào)用。

Vue3.0 響應(yīng)式原理

Vue3 使用 Proxy 對象重寫響應(yīng)式系統(tǒng)，這個系統(tǒng)主要有以下幾個函數(shù)來組合完成的：

1、reactive:

接收一個參數(shù)，判斷這參數(shù)是否是對象。不是對象則直接返回這個參數(shù)，不做響應(yīng)式處理

創(chuàng)建攔截器對象 handler, 設(shè)置 get/set/deleteProperty

get

收集依賴（track）

返回當前 key 的值。

如果當前 key 的值是對象，則為當前 key 的對象創(chuàng)建攔截器 handler, 設(shè)置 get/set/deleteProperty

如果當前的 key 的值不是對象，則返回當前 key 的值

set

設(shè)置的新值和老值不相等時，更新為新值，并觸發(fā)更新（trigger）

deleteProperty

當前對象有這個 key 的時候，刪除這個 key 并觸發(fā)更新（trigger）

返回 Proxy 對象

2、effect: 接收一個函數(shù)作為參數(shù)。作用是：訪問響應(yīng)式對象屬性時去收集依賴

3、track:

接收兩個參數(shù)：target 和 key

如果沒有 activeEffect，則說明沒有創(chuàng)建 effect 依賴

如果有 activeEffect，則去判斷 WeakMap 集合中是否有 target 屬性，

WeakMap 集合中沒有 target 屬性，則 set(target, (depsMap = new Map()))

WeakMap 集合中有 target 屬性，則判斷 target 屬性的 map 值的 depsMap 中是否有 key 屬性

depsMap 中沒有 key 屬性，則 set(key, (dep = new Set()))

depsMap 中有 key 屬性，則添加這個 activeEffect

4、trigger:

判斷 WeakMap 中是否有 target 屬性

WeakMap 中沒有 target 屬性，則沒有 target 相應(yīng)的依賴

WeakMap 中有 target 屬性，則判斷 target 屬性的 map 值中是否有 key 屬性，有的話循環(huán)觸發(fā)收集的 effect()

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

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

Vue響應(yīng)式原理核心是 數(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)用對應(yīng)的回調(diào)函數(shù)進行相關(guān)的處理和DOM更新

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

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

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

解決方案：

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

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

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

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

// 實現(xiàn)數(shù)組響應(yīng)式// 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}方法`);}})// 對象響應(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ù)組，修改其實例的原型if(Array.isArray(obj)){// 3. 將得到的新的原型設(shè)置到數(shù)組實例原型上obj.__proto__=arrayProto// 4. 對數(shù)組內(nèi)的元素，同樣進行響應(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

鏈接：

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

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

那么是怎么實現(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)用，實現(xiàn)了每一層都有響應(yīng)監(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 獲取屬性值的過程中，會挨個訪問響應(yīng)對象的屬性，就會觸發(fā)相應(yīng)的 getter ，我們回到 defineReactive.js ，可以發(fā)現(xiàn)這時候相應(yīng)屬性的 getter 就會把 Dep.target 也就是相應(yīng)的 Watcher 的實例保存在了 Dep 類的訂閱者數(shù)組里面

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

關(guān)于Vue的響應(yīng)式原理和vue響應(yīng)式原理簡書的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。