vue生命週期、雙向繫結

柒國招發表於2019-03-19

生命週期:

  • 在beforeCreate和created鉤子函式之間的生命週期: 初始化事件,進行資料的觀測 created的時候資料已經和data屬性進行繫結(放在data中的屬性當值發生改變的同時,檢視也會改變)。

  • created鉤子函式和beforeMount間的生命週期 首先會判斷物件是否有el選項(掛載的dom接點)。如果有的話就繼續向下編譯,如果沒有el選項,則停止編譯, 也就意味著停止了生命週期,直到在該vue例項上呼叫vm.$mount(el)

  • beforeMount和mounted 鉤子函式間的生命週期 給vue例項物件新增$el成員,並且替換掉掛在的DOM元素

  • beforeUpdate鉤子函式和updated鉤子函式間的生命週期 當vue發現data中的資料發生了改變,會觸發對應元件的重新渲染,先後呼叫beforeUpdate和updated鉤子函式

  • beforeDestroy鉤子函式在例項銷燬之前呼叫。在這一步,例項仍然完全可用。

  • destroyed鉤子函式在Vue 例項銷燬後呼叫。呼叫後,Vue 例項指示的所有東西都會解繫結, 所有的事件監聽器會被移除,所有的子例項也會被銷燬。

vue雙向繫結原理:

通過資料劫持結合釋出者-訂閱者模式實現的 用 Object.defineProperty重寫set和get函式來實現資料劫持

釋出者-訂閱者模式:

1.實現一個監聽器Observer,用來監聽所有屬性,如果有變動的,就通知訂閱者。

2.實現一個訂閱者Watcher,可以接收屬性的變化通知並執行相應的函式,從而更新檢視。

var:變數提升(無論宣告在何處,都會被提至其所在作用於的頂部) let:無變數提升(在let宣告語句之前,是無法訪問該變數的) const:無變數提升,宣告一個基本型別的時候為常量,不可修改;宣告物件可以修改

相關文章