Vue聲明週期與其事件

computed、data、watch區分

• computed是依賴於其他屬性的計算屬性，當其他值發生變化時computed纔會做出響應。
• data是每個Vue實例返回的獨立拷貝方法
• watch用於監聽某個值的變化以做出響應。

組件通信

1. 父子組件

• props和event
  通過props向下傳遞，通過event向上傳遞
• v-model
  雙向綁定，v-bind和v-on的語法糖
• $emit和$on
  父子組件通過發送事件和事件監聽傳遞
• $refs
  爲組件註冊ID引用，根據ID引用獲取組件的實例
  注：$refs並非響應式，只能獲取獲取時間節點的狀態
• $parent和$children
  缺點在於不能定位父組件的變化點

2. 非父子通信

• provide和inject
  最高層組件provide，低層inject
• 訪問跟實例$root
• 通過$attrs和$listeners
  中間組件通過$attrs和$listeners獲取屬性和監聽事件
• eventBus
  在兩個需要通信的組件中引入同一組件使用$emit和$on
• Vuex

生命週期分析

• new Vue()新建Vue的實例，調用Vue.prototype._init函數
• beforeCreate之前：初始化事件、生命週期和渲染函數，並調用callHook(vm,'beforeCreate')調用鉤子函數。
• created之前：初始化注入，初始化數據，初始化校驗，調用callHook(vm,'create')

Vue.prototype._init = function(options) {
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate') // 拿不到 props data
  initInjections(vm)
  initState(vm)
  initProvide(vm)
  callHook(vm, 'created')
}

• beforeMounted之前：如圖進行虛擬DOM的渲染
• mounted：遞歸的掛載組件及其子組件
• beforeUpdate
• update:重新渲染虛擬DOM,實現更新
• beforeDestroy:調用Vue.Prototype.$destroy，調用callHook(vm,'beforeDestroy')進入beforeDestroy，撤銷掛載，銷燬子組件和監聽器。
• destroy銷燬完畢。

注：

• activated和deactivated是鉤子函數keep-alive獨有。組件切換時不被銷燬而是緩存到內存中執行deactivated，命中緩存後執行activated

雙向數據綁定

根本上通過Object.defineProperty()結合觀察者訂閱者模式來實現。

• Vue通過Object.definProperty()定義數據的getter和setter方法，實現觀察者模式。
• 每個Vue組件有一個watcher的實例，收集與之相關的data依賴，每當數據改變時（調用setter()）通知watcher，從而將關聯的組件重新渲染。
  問題一：爲什麼Vue3.0使用Proxy
• 區別：Proxy代理整個對象，而Object.defineProperty()只是劫持對象的屬性，需要遍歷對象的所有屬性。
• 性能上Proxy在JS引擎中會持續優化，而Object.defineProterty()中的setter和getter不會再優化。

路由