Vue生命週期相關

1. Vue生命週期是什麼?

vue實例從建立到銷燬,也就是從建立--初始化數據--編譯模板--掛載Dom->渲染--更新->渲染--卸載等一系列過程

2.Vue生命週期鉤子函數有哪些?

• beforeCreate -- 建立階段的第一個生命週期函數 當執行到beforeCreate鉤子函數的時候,當前的Vue實例的data數據和methods方法,都尚未初始化完成,所以這個函數對開發的實際意義不大.
• created(重要) -- 建立階段的第二個生命週期函數 .當執行到created生命週期函數的時候,實例中的data數據和methods方法,都已經被初始化完畢了,能夠被正常的訪問,在項目開發中,若是是首屏的ajax請求,都須要在該鉤子函數中發起請求
• beforeMount -- 建立階段的第三個生命週期函數.執行到這個生命週期的時候,此時瀏覽器中的頁面仍是假的頁面,並非真正帶有數據的頁面
• mounted 建立階段的第四個生命週期函數,表明頁面已經完成了首次渲染,此時已經把頁面上的模板結構,替換到內存中,帶有真實數據的頁面(初始化的代碼必定要寫到mounted中)
• beforeUpdate(運行階段的生命週期函數) --將要根據最新的data數據,重新解析全部指令,從而從新渲染到瀏覽器頁面中,這時data中的數據是最新的,可是頁面依舊是舊的頁面
• updated(運行階段的生命週期函數) 此時頁面已經完成了更新,此時data中的數據和頁面都是最新的
• activated keep-alive組件激活時調用.該鉤子在服務器渲染期間不被調用
• deactivated keep-alive組件停用時調用.該鉤子在服務器渲染期間不被調用
• beforeDestroy 實例銷燬以前調用,實例依然是可使用的
• destroyed Vue實例銷燬後調用Vue實例指令的全部東西都會接觸綁定,全部事件都會被移除,全部的子實例也會被銷燬
• errorCaptured(2.5.0+ 新增)當捕獲一個來自子孫 組件的錯誤時被調用,有三個參數:錯誤對象,發生錯誤的組件實例以及一個包含錯誤來源信息的字符串.此鉤子能夠返回false以阻止該錯誤繼續向上傳播.

3.Vue的dom操做

• 給要操做的標籤設置ref屬性
• 在 mounted方法中獲取要操做的dom
• 經過this.$refs獲取要操做的dom

示例: 
    const vm = new Vue({
        mounted() {
            this.$refs.dom // 進行相關操做
        }
    })
    
複製代碼