大前端 3 2 Vue響應式原理簡述

2021-10-09 07:55:24 字數 1445 閱讀 8807

資料響應式是指,當資料發生變化自動更新檢視,不需要手動操作dom,

第一步、入口,initstate()

vm狀態的初始化,整個響應式是從init方法中開始的,在init方法中,呼叫initstate方法初始化狀態,在initstate方法中呼叫initdata(),將data屬性注入到vue例項上,並且呼叫observe()將其轉化為響應式物件,observe是響應式的入口

第二步、observe(value)

位於src/core/observer/index.js,首先判斷value是否是物件,如果不是物件直接返回,判斷value物件是否有

__ob__,如果有證明value已經做過響應化處理,是響應式資料,則直接返回,如果沒有,則在第三步建立observer物件,並將其返回。

第三步、observe()

位於src/core/observer/index.js,給value物件定義不可列舉的__ob__屬性,記錄當前的observer物件,進行陣列的響應化處理,設定陣列中的方法push、pop、sort等,這些方法會改變原陣列,所以當這些方法被呼叫的時候,會傳送通知,找到observe物件中的dep,呼叫dep.notify()方法,然後呼叫陣列中的每乙個成員,對其進行響應化處理,如果成員是物件,也會將轉化為響應式物件,如果value是物件的話,會呼叫walk(),遍歷物件中的每乙個成員,呼叫definereactive()

第四步、definereactive

src/core/observer/index.js,為每乙個屬性建立dep物件,如果當前屬性是物件,遞迴呼叫observe().

getter:為每乙個屬性收集依賴,如果當前屬性是物件,也為物件的每乙個屬性收集依賴,最終返回屬性值。

setter:儲存新值,如果新值是物件,則呼叫observe,派發更新(傳送通知),呼叫dep.notify()

第五步、依賴收集

在watcher物件的get方法中呼叫pushtarget,會把當前的watcher記錄dep.target屬性,訪問的data成員的時候收集依賴,訪問值的時候會呼叫definereactive的getter中收集依賴,把屬性對應的watcher物件新增到dep的subs陣列中,如果屬性是物件,則給childob收集依賴,目的是子物件新增和刪除成員時傳送通知。

第六步、watcher

當資料發生變化時,會呼叫dep.notify(),呼叫watcher物件的update()方法,在update方法中會呼叫queuewatcher(),方法中會判斷watcher是否被處理,如果沒有,則將其新增到queue佇列中,並呼叫flushschedulerqueue()重新整理任務佇列,在flushschedulerqueue中,會觸發beforeupdate鉤子函式,然後呼叫watcher.run(),然後清空上一次的依賴,觸發actived鉤子函式,觸發update鉤子函式。

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

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

前端響應式原理

響應式布局指的是同一頁面在不同螢幕尺寸下有不同的布局 響應式設計與自適應設計的區別 響應式開發一套介面,通過檢測視口解析度,針對不同客戶端在客戶端做 處理,來展現不同的布局和內容 自適應需要開發多套介面,通過檢測視口解析度,來判斷當前訪問的裝置是pc端 平板 手機,從而請求服務層,返回不同的頁面 方...

vue響應式原理

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