從原始碼來看VUE的執行流程
阿新 • • 發佈：2021-12-22
- 進入頁面
- Vue初始化
執行new Vue()進入到Vue的建構函式
- _init()方法
初始化繫結事件和生命週期鉤子
- 呼叫beforeCreate這個鉤子函式
在這個鉤子函式中還沒有初始化資料，所以在這個鉤子函式中一般不進行操作
- 緊接著進行props、data、methods、computed、watch等的初始化
這個過程中已經將資料轉換為了響應式資料
- 呼叫了created鉤子函式
在這個鉤子函式中已經可以拿到資料，而且可以對資料進行修改，我們可以在這個鉤子函式中向後端發起請求，非同步獲取到資料，這個時候修改資料不會呼叫update函式，也不會觸發其他生命週期鉤子呼叫mount函式
- 呼叫$mount函式（不是生命週期的鉤子函式）
在$mount函式中將 template/el 轉化成 render 函式，準備渲染
- 呼叫mountComponent
- 呼叫beforeMount鉤子
模板已經編譯好了，還沒有轉為真實DOM掛載到頁面，這個鉤子函式中也可以請求資料，修改資料，修改也不會觸發updata函式，不會觸發其他生命週期鉤子函式
- 定義了updateComponent
給updateComponent賦值為一個將虛擬DOM轉換為真實DOM並掛載到頁面上的函式。
- 初始化Watcher例項，
將updateComponent作為回撥函式cb傳入Watcher，在Watcher構造器中，判斷了cb回撥函式是否是函式，如果是函式，賦給this.getter，
- 呼叫this.get()方法
依賴收集就是發生在這個get方法中， 在get方法中，首先呼叫pushTarget()方法將這個Watcher例項入棧，並設定Dep.target = Watcher例項（啟用依賴收集）。然後呼叫this.getter()，也就是呼叫updateComponent這個回撥函式，在這個函式中，首先呼叫_render()方法將虛擬DOM渲染為真實DOM，在這個方法中，觸發了c方法，v方法，s方法，會訪問到所依賴的資料，觸發getter，然後判斷Dep.target是否存在，我們在pushTarget中已經啟用了依賴收集，所以這個時候就會通過判斷，執行depend方法，呼叫Watcher的addDep方法，在addDep方法中，首先獲取dep的id，然後判斷newDepIds陣列中是否存在這個id，防止重複收集依賴。如果不存在，將dep.id存到newDepIds陣列中，並將這個Watcher例項增加到dep的subs陣列中。至此依賴收集完成
- 當資料更新後，就會立即執行beforeUpdate鉤子函式
Vue 的虛擬 dom 機制會重新構建虛擬 dom 與上一次的虛擬 dom 樹利用 diff 演算法進行對比之後重新渲染，一般不做什麼事