Vue2 x 原始碼閱讀筆記

2021-10-13 13:05:01 字數 1246 閱讀 4492

定義 vue 的_init_方法:

初始化 vm.$options

初始化生命週期

初始化 events

初始化 render

呼叫鉤子函式 beforecreate()

初始化 injections

初始化 state

初始化 methods

初始化 data

初始化 computed

初始化 watch

初始化 provide

呼叫鉤子函式 created()

掛載根 dom 元素 $el 到 vm 上由於 flow 在直接用 object.defineproperty 宣告定義物件時會有問題,因此要在這裡構建物件

為 vm 新增 $data 和 $props 屬性

為 vm 新增 $set 和 $delete 屬性

為 vm 新增 $watch 方法

返回值為取消監聽( unwatch )函式

為 vm 新增 $on 方法為 vm 新增 _update 方法(呼叫鉤子函式 updated())

比較之前的 dom 元素和現在的 dom 元素,打補丁( patch() )

為 vm 新增 $forceupdate 方法

讓 vue 例項的***更新

為 vm 新增 $destroy 方法(呼叫鉤子函式 beforedestroy())為 vue 新增執行時的幫助引數

為 vm 新增 $nexttick 方法

為 vm 新增 _render 方法vue 的雙向繫結原理主要是利用 object.defineproperty() 結合發布/訂閱模式實現的。

發布/訂閱模式定義了物件的一對多關係,當某個物件的狀態發生變化時,所有依賴於他的物件都將獲得通知。

vue 採用 object.defineproperty() 來攔截物件的讀寫操作,將物件封裝為可觀察的物件,通過 get()進行依賴收集,通過 set() 對相關物件進行通知。dep 是收集依賴的容器,將資料的變化廣播給訂閱物件,訂閱物件從而執行相應的更新。

檢視更新過程:

patch 函式的邏輯:

如果只有新節點有子節點,則建立真實dom節點新增到子節點位置。

如果只有舊節點有子節點,則直接刪除舊節點的子節點。

如果舊節點是文字節點而新節點文字屬性為空,則將節點文字內容置空。

如果新舊節點基本屬性不一樣或者舊節點是真實 dom 型別,根據新 vnode 建立乙個真實 dom 節點,插入到舊節點的位置,將舊節點替換掉。

vue2 x原始碼導讀

src platforms web entry runtime with compiler.js src platforms web runtime index.js src core index.js src core instance index.js 建構函式的定義 function vue ...

Vue2 x原始碼解讀 模板編譯

模板編譯作用模板編譯入口 模板編譯的入口在 mount方法中,在處理使用者傳入的template時,會將使用者傳入的template轉化為render函式。在原始碼的src platforms web entry runtime with compiler.js檔案中定義了這個處理過程。模板編譯的過...

vue2 x學習筆記(一)

使用vue開發專案已經過了一段時間了,對其中的很多東西還是一知半解,於是想要系統學習一下。主要內容是參照官方中文 然後加上一些自己的理解與批註。什麼是vue.js vue 讀音 vju 類似於view 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,vue被設計為可以自底向上逐層應用。...