vue 響應式原理

2021-10-19 10:52:21 字數 849 閱讀 2492

1.vue響應式原理核心使用的api是:object.defineproperty(obj,key,val)

會對props和data、computed中的陣列和物件都進行乙個遍歷,這個過程其實就是賦予資料set和get方法,讓資料的訪問和賦值有一些內部處理

2.由於vue的核心使用的是object.defineproperty,但是ie8及其以下版本是不相容這個api的,並且也沒有提供相關的api支援這個功能,因此這也是為什麼vue專案不相容的根本原因

3.在對陣列和物件進行操作的過程中,會對物件進行乙個遞迴,因為物件中屬性的值有可能還是乙個物件,vue將陣列和物件設定訪問器屬性分開做了兩個方法進行的處理

4.原始碼中observe方法是遞迴的去執行檢查是否是乙個物件,是物件就遞迴,確保裡面的每乙個屬性都得到了響應式的初始化

5.definereactive方法就是具體的乙個object.defineproperty()的乙個vue的封裝了,也就是在這裡進行的響應式的關鍵**

6.所謂的自動化其實就是在get和set裡面去做文章

7.其中get做的事情其實就是依賴收集:就是訂閱資料變化的watcher的收集,這樣在set的時候就會做一些更新這些watcher的操作,也就清楚的知道了在觸發setter的時候,能知道應該通知哪些watcher去進行渲染

8.set()中發生的就是派發更新了,也就是對get()收集的依賴,進行精準更新的乙個過程。當資料發生改變後,通知所有訂閱了這個資料變化的watcher執行update

9.為什麼我們給物件新增新屬性的時候需要$set去設定,但是我們對陣列的一些操作卻能夠直接更新。是因為vue重寫了一些陣列原型上的方法:push、pop、shift、unshift、splice、sort、reverse

vue響應式布局 Vue 響應式原理

vue2 的資料偵測 在 src observer 目錄裡面,元件例項在初始化時,會呼叫 observe 函式處理 data function initdata vm observe 改寫了所有物件屬性的 getter setter 和陣列原型上的 7 個會改寫陣列方法,從而讓 data 變成可響應...

vue響應式原理

響應式系統是vue框架核心的部分,資料物件僅僅是普通的 js物件。當我們改變資料時,檢視也會被改變,本文就來 一下vue 的響應式原理。vue響應式的核心是使用了es5 新增的api object.defineproperty 因此vue不支援ie8 object.defineproperty的作用...

vue響應式原理

要了解響應式原理首先應該知道什麼是響應式 更改 vue的響應式原理是什麼 vue資料的雙向繫結是通過資料劫持結合發布訂閱模式,偵測到資料變化,然後通過object.defineproperty 物件對每個屬性的getter和setter進行劫持。當讀取 data 中的資料時自動呼叫 get 方法,當...